Опустить див вниз с флоатом - HTML и CSS

rewiaca · 08.01.2010, 01:25

Вот такая вот задачка. Мучаюсь уже час, перелопатил интернеты - везде с position.

Смысл таков что есть div1 и в нем два дива - div2 float:left, а div3 float:right. Все было бы хорошо, но div1 растягивается по высоте, т.е. я не могу задать margin-top:50px или чтото вроде.

Прилагаю скриншот

Это осуществимо на чистом ксс кросбраузерно?

spein · 08.01.2010, 12:35

Попробуй vertical-align:bottom

uberchel · 08.01.2010, 14:20

Вот пример:

Код HTML:

<html>
<head>
<title>TEST</title>
</head>
<body style="background:#333333; padding: 10px;">
<center>
<h2 style="color:#fff000;">Пример</h2>
<br />
<br />
<div style="background:#565656; border:1px solid #FF2000; width:500px; height:100px; padding:20px 10px 0 10px;">
<div style="float:right; width:50%px;">Правая сторона</div>
<div style="float:left; width:50%px;">Левая Сторона</div>
</div>
</center>
</body>
</html>

rewiaca · 08.01.2010, 21:15

Извините но вы наверно неправильно поняли - главный контейнер, в котором хранятся два эти плавающие дивы, растягивается по высоте, т.е. она не фиксированна.

Соответственно вертикал-алигн не катит и второй вариант который предложили тоже не подходит - там указана фиксированная высота.

uberchel · 08.01.2010, 21:19

Дык поставе не фиксированную в % , или я вас не правильно понимаю ??

Код:

<div style="background:#565656; border:1px solid #FF2000; width:500px; height:40%; padding:20px 10px 0 10px;">

rewiaca · 10.01.2010, 00:33

В том то и дело, что не могу никак высоту задать. Блок должен сам растягиваться, т.к. контент который в нем заключен динамический.

Вроде бы простая задачка но убогому "языку" css это не под силу видимо.

13th · 10.01.2010, 02:20

попробуй содержимое контейнера див2 загнать в еще один див

Код:

<div id="div2">
    <div style="position:relative;top:50px;">
        content
    </div>
</div>

rewiaca · 10.01.2010, 16:03

Цитата:

Сообщение от 13th

попробуй содержимое контейнера див2 загнать в еще один див

Код:

<div id="div2">
    <div style="position:relative;top:50px;">
        content
    </div>
</div>

уже лучше, но вы всеравно не вникли в ситуацию, выйдет так:

правда я тут малясь не так нарисовал но смысл такой

13th · 10.01.2010, 23:39

есть одно коварное решение)))))) я его уже второй день верстаю , правда потягивая пивко ))) , там футер (контакты и поиск ) всегда находятся внизу страницы , кстати именно вместе с поиском, даже если и контента мало, а когда контента больше чем высота окна, футер уходит вниз.
В твоем же случае если тупо надо чтобы див2 находился внизу "динамически изменяемого контейнера" , то такой код

Код:

<div style="width:100%;">
   <div style="float:left;" >
       динамически изменяемым контент<br />
       динамически изменяемым контент<br />
       динамически изменяемым контент<br />
       динамически изменяемым контент<br />
       динамически изменяемым контент<br />
       динамически изменяемым контент<br />
       динамически изменяемым контент<br />
   </div>
   <div style="clear:both;width:100%;overflow:hidden;">
      <div style="float:right">
          а тут наверно то , что нужно<br />
          наверно)))<br />
          скорее всего<br />
      </div>
   </div>
</div>

rewiaca · 20.01.2010, 15:19

Цитата:

Сообщение от 13th

есть одно коварное решение)))))) я его уже второй день верстаю , правда потягивая пивко ))) , там футер (контакты и поиск ) всегда находятся внизу страницы , кстати именно вместе с поиском, даже если и контента мало, а когда контента больше чем высота окна, футер уходит вниз.
В твоем же случае если тупо надо чтобы див2 находился внизу "динамически изменяемого контейнера" , то такой код

Код:

<div style="width:100%;">
   <div style="float:left;" >
       динамически изменяемым контент<br />
       динамически изменяемым контент<br />
       динамически изменяемым контент<br />
       динамически изменяемым контент<br />
       динамически изменяемым контент<br />
       динамически изменяемым контент<br />
       динамически изменяемым контент<br />
   </div>
   <div style="clear:both;width:100%;overflow:hidden;">
      <div style="float:right">
          а тут наверно то , что нужно<br />
          наверно)))<br />
          скорее всего<br />
      </div>
   </div>
</div>

Вот это лучшее решение из всех. Жаль все таки что нельзя вот так именно:

08.01.2010, 01:25	#1
rewiaca Регистрация: 08.01.2010 Сообщений: 6	Опустить див вниз с флоатом Вот такая вот задачка. Мучаюсь уже час, перелопатил интернеты - везде с position. Смысл таков что есть div1 и в нем два дива - div2 float:left, а div3 float:right. Все было бы хорошо, но div1 растягивается по высоте, т.е. я не могу задать margin-top:50px или чтото вроде. Прилагаю скриншот Это осуществимо на чистом ксс кросбраузерно?

08.01.2010, 12:35	#2
spein Программист Форумчанин Регистрация: 27.02.2009 Сообщений: 505	Попробуй vertical-align:bottom there are no limits when you're software engineer

10.01.2010, 02:20	#7
13th Форумчанин Регистрация: 31.12.2008 Сообщений: 634	попробуй содержимое контейнера див2 загнать в еще один див Код: `<div id="div2"> <div style="position:relative;top:50px;"> content </div> </div>` Возможно всё Пишу обо всем

10.01.2010, 23:39	#9
13th Форумчанин Регистрация: 31.12.2008 Сообщений: 634	есть одно коварное решение)))))) я его уже второй день верстаю , правда потягивая пивко ))) , там футер (контакты и поиск ) всегда находятся внизу страницы , кстати именно вместе с поиском, даже если и контента мало, а когда контента больше чем высота окна, футер уходит вниз. В твоем же случае если тупо надо чтобы див2 находился внизу "динамически изменяемого контейнера" , то такой код Код: <div style="width:100%;"> <div style="float:left;" > динамически изменяемым контент<br /> динамически изменяемым контент<br /> динамически изменяемым контент<br /> динамически изменяемым контент<br /> динамически изменяемым контент<br /> динамически изменяемым контент<br /> динамически изменяемым контент<br /> </div> <div style="clear:both;width:100%;overflow:hidden;"> <div style="float:right"> а тут наверно то , что нужно<br /> наверно)))<br /> скорее всего<br /> </div> </div> </div> Возможно всё Пишу обо всем Последний раз редактировалось 13th; 10.01.2010 в 23:43.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Richedit ScrollBar вниз	KoBRaAndrey	Общие вопросы Delphi	4	03.01.2010 20:10
При старте страницы, опустить полосу прокрутку вниз	_PROGRAMM_	JavaScript, Ajax	0	27.12.2009 18:45
RichEdit опускание вниз	KoBRaAndrey	Общие вопросы Delphi	8	04.12.2009 23:43
как растянуть див на всю высоту клиентской части окна браузера	Anopsa - Anna	HTML и CSS	3	21.09.2009 10:07
Див - Текст отьежает при клике (HTML)	kaviga	Помощь студентам	13	21.02.2009 11:57

08.01.2010, 21:15	#4
rewiaca Регистрация: 08.01.2010 Сообщений: 6	Извините но вы наверно неправильно поняли - главный контейнер, в котором хранятся два эти плавающие дивы, растягивается по высоте, т.е. она не фиксированна. Соответственно вертикал-алигн не катит и второй вариант который предложили тоже не подходит - там указана фиксированная высота.

08.01.2010, 21:19	#5
uberchel Участник клуба Регистрация: 19.01.2009 Сообщений: 1,453	Дык поставе не фиксированную в % , или я вас не правильно понимаю ?? Код: `<div style="background:#565656; border:1px solid #FF2000; width:500px; height:40%; padding:20px 10px 0 10px;">`

10.01.2010, 00:33	#6
rewiaca Регистрация: 08.01.2010 Сообщений: 6	В том то и дело, что не могу никак высоту задать. Блок должен сам растягиваться, т.к. контент который в нем заключен динамический. Вроде бы простая задачка но убогому "языку" css это не под силу видимо.