как растянуть div по ширине другого дива без js

[dandandan]

как растянуть div по высоте другого дива без js

Верстаю шаблон.
Вот кусок html кода.
на картинке начинается с красной стрелки.

<div class="left85"><img src="images/07.jpg" width="100%" alt="фокусы" /><div>
<div class="right15">&nbsp;<div>

<div class="clear"></div>

<div class="left80"><img src="images/08.jpg" width="100%" alt="фокус" /><div>
<div class="right20">&nbsp;<div>

div.left85{
	float:left;
	width:85%;
	}	
div.right15 {
        float:right;
	width:15%;
        background:#0e3206 url(images/grin.gif) repeat;
	}
div.left80{
	float:left;
	width:80%;
	}	
div.right20 {
        float:right;
	width:20%;
        background:#0e3206 url(images/grin.gif) repeat;
	}
div.clear{
	clear:both;
	}

Фотографии растягиваются по ширине на 100% от ширины дива, а вот высота фотки при этом неизвестна и равна X на рисунке. В результате получается так, что задний фон у дивов шириной 15% не окрашивается, т.к., видимо высоту нужно как-то задать. Если внутри дива поместить  , то див, шириной 15% закрашивается на одну строку.
Аналогично получилось и при ширине 80 и 20%.

Как залить зеленым цветом задний фон у дива шириной 15 и 20 % (выделен пунктирными рамочками)? Я так поинимаю, что надо как-то его растянуть. Тогда как его растянуть до ширины другого дива?

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

 

[OverFade]

Вот было простое решение двух блоков одинаковой высоты с четко понятным примером: Для просмотра ссылки Войди или Зарегистрируйся
Но я предпочитаю для таких целей таблицы... Так на много проще.

 

[капрал]

В результате получается так, что задний фон у дивов шириной 15% не окрашивается, т.к., видимо высоту нужно как-то задать.

я не уверен, но попробуй перед закрытием этого дива вставить <br style="display:block; clear:both" />

 

[rafic]

я не уверен, но попробуй перед закрытием этого дива вставить <br style="display:block; clear:both" />

А почему именно br ? ты ж говрил, что можно к любому тэгу слеар привязать... а тут ты br. Почему?

 

[_axl]

вот решение:

<div class="left85">
[INDENT]<img src="images/07.jpg" alt="фокусы" />
<div class="right15"><div>[/INDENT]
<div>
<br class="brc" />
<div class="left80">
[INDENT]<img src="images/08.jpg" alt="фокус" />
<div class="right20"><div>[/INDENT]
<div>
<style>
.brc{ clear: both; }
div.left85{ 
[INDENT]float:left; 
width: 100%; 
position: relative; [/INDENT]
}
div.left85 img{ width: 85%; }
div.right15 {
[INDENT]position: absolute;
right: 0;
top: 0;
height: 100%;
background:#0e3206 url(images/grin.gif) repeat;[/INDENT]
}
div.left80{
[INDENT]float:left; 
width: 100%; 
position: relative; [/INDENT]
}
div.left80 img{ width: 80%; }
div.right20 {
[INDENT]position: absolute;
right: 0;
top: 0;
height: 100%;
background:#0e3206 url(images/grin.gif) repeat;[/INDENT]
}
</style>

А почему именно br ? ты ж говрил, что можно к любому тэгу слеар привязать... а тут ты br. Почему?

Это не правильно с точки зрения семантики, div сделан чтобы что-нибуль в него помещать, а здесь его используют просто для перевода строки и отмены обтекания.

 

[капрал]

Это не правильно с точки зрения семантики

с семантикой по полной дружить - до старости без седых можно и не дожить.

Насчет br - можно все что угодно использовать: div, br, i. С br конечно в IE проблемы возникают, но его более семантично как было указано использовать (типа перевод каретки просто).

А вобще в CSS2 можно и без <br style='clear:both'> можно обходится.

 

[Tau]

а таблицами быстрее . Но дивами типа круче. типа семантичнее. а для seo пофигу. а для обеспечения просмотра в старых браузерах - таблицы тоже меньше гемора вызовут. Но дивами все равно круче. ЗА крутость надо платить - хаками и литрами пива. Проверено.

 

[vindozo]

что вы так зациклились на дивы? с таблицами много легче

 

[dandandan]

Воспользовался этой ссылокой.

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

внутри ссылки были еще несколько ссылок на варианты. Вот одна из этих ссылок привела к понравившемуся мне решению. Решение кроссбраузерное, подходит для разного кол-ва колонок, без хаков. Вот она. см. ниже.

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

 

[капрал]

Решение кроссбраузерное, подходит для разного кол-ва колонок, без хаков.

м-м-м... это больше подходит когда у колонки простая заливка цветом. если надо сделать какой-то более сложный бэкграунд то лучше контейнеру, удерживающему все колонки прописать повтороящийся отрезок бекграунда с полями под колонки.