VPF::еще раз о div-ах - Форум программистов

AlDev

Дата 14.1.2006, 06:41 (ссылка)

(нет голосов)

Загрузка ...

Опытный идиотъ

Профиль
Группа: Участник Клуба
Сообщений: 1927
Регистрация: 17.4.2005
Где: Irk, rus

Репутация: нет
Всего: 50

Помогите, плиз.
Есть три горизонтально расположеных div-а.
У первого и второго float: left. У третьего float: right.
У первого и третьего ширина задана аболютно.
Вопрос: как растянуть центральный div между ними?

Код:

Код


body 
{
  min-width: 640px;
}

#header 
{
  overflow: hidden;
  display: inline-block;
  width: 100%;
}

#header div.top
{
  width: 100%;
}

#header div.topLeft
{
  float: left;
  width: 11px;
  height: 21px;
  background: url(images/01.gif);
  background-repeat: no-repeat;
}

#header div.topCenter
{
  float: left;
  height: 21px;
  background: url(images/02.gif);
  background-repeat: repeat-x;
}
 
#header div.topRight
{
  float: right;
  width: 119px;
  height: 21px;  
  background: url(images/03.gif);
  background-repeat: no-repeat;
}

Код


<body>
<div id="header">
  <div class="top">
    <div class="topLeft"></div>
    <div class="topCenter">bla</div>
    <div class="topRight"></div>
  </div>
</div>
</body>

Это сообщение отредактировал(а) AlDev - 14.1.2006, 06:42

Cheba

Дата 14.1.2006, 20:00 (ссылка)

(нет голосов)

Загрузка ...

pointless one

Профиль
Группа: Vingrad developer
Сообщений: 1777
Регистрация: 27.11.2003
Где: /dev/null

Репутация: 14
Всего: 62

Код

<!DOCTYPE html PUBLIC "-//W4C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
<head>
    <title>tricols</title>
    <style type="text/css">
#leftcol {
    float: left;
    width: 200px;
    background: green;
}

#rightcol {
    float: right;
    width: 200px;
    background: green;
}

#midcol {
    margin: 0px 200px;
    background: blue;
}
    </style>
</head>
<body>
<div id="header">Title here</div>
<div id="leftcol">Left column</div>
<div id="rightcol">Right clumn</div>
<div id="midcol">Cener column</div>
<div id="footer">&copy; by *** - footer</div>
</body>
</html>

--------------------

Как правильно задавать вопросы

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »