Форум Сайтостроение Веб-строительство

как растянуть div

A
На сайте с 12.03.2009
Offline
58
alkatran
1786

Здравствуйте. Помогите подправить верстку если знаете как. Есть 1 блок выровняный по левому краю, а во втором есть2 блока - один находится сверху он не большой (новости), а во втором находится баннер который должен располагаться внизу т.е. второй блок должен вытянуться до высоты первой колонки и баннер должен быть внизу. Спасибо.

ЗЫ. может я недоходчиво написал?

<div id="news">

<div id="list">

<!-- Image Replacement. Метод Pixy -->

<h3>Лента новостей<span></span></h3>

<small><a href="#">Архив</a></small>

<div class="empty">

<p>{topnews}</p>

</div>

</div>

<div id="clear"></div>

<div id="news_banner"><img src="{THEME}/images/button.jpg" alt="" width="233" height="73" /></div>

</div>

#news {

float: right;

width: 270px;

background: url('../images/content.border.jpg') 0% 50% repeat-y;

overflow: hidden;

height: 100%;

}

#content #news #list,

#content #second {

margin-left: 35px;

background: url('../images/content.news.bg.jpg') no-repeat;

vertical-align: top;

height: 100%;

}

#news_banner {

vertical-align: bottom;

margin-left: 35px;

height: 100%;

}

Все самое лучшее и бесплатное здесь - Развлекательный портал для всех! (http://www.multiwarezportal.ru)
Gusev
На сайте с 24.07.2009
Offline
12
Gusev
#1

если я понял ставьте float во всех дивах, наружные дивы с флоатом не воспринимают внутренние дивы без оного, считают за отсутствие контента.

Клепаем сайты умеючи (http://wpst.ru/) Халявный хостинг (/ru/forum/395797)
A
На сайте с 12.03.2009
Offline
58
alkatran
#2

Спасибо, попробую.

Avenger
На сайте с 22.07.2007
Offline
47
Avenger
#3

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

можете еще попробовать прописать <div style="clear:both"></div> после <div id="news_banner"><img src="{THEME}/images/button.jpg" alt="" width="233" height="73" /></div>

С уважением, Андрей Головнев (http://golovnev.by/)
Возможности для брендинга в Google: как сделать статические Оптимизируем видео из YouTube
A
На сайте с 12.03.2009
Offline
58
alkatran
#4

не, ничего не помагает.

kapyceJlb
На сайте с 06.12.2008
Offline
23
kapyceJlb
#5

не стал копать ваш код,ибо он вырезан весьма неудобно, просто наклепал свой макет, основные его особености выделены красным. 


<div id="container" style="border:1px solid #03C; overflow:auto; width:100%; position:relative;">

	<div id="left_block" style="float:left">

	тенется<br />

	тенется<br />

	тенется<br />

	тенется<br />

	тенется<br />

	тенется<br />

	тенется<br />

	тенется<br />

	тенется<br />

	</div>

	<div id="right_block" style="float:right;width:270px;background:#666;overflow: hidden;height: 100%;">

	sssss

	<div id="img_down" style="position:absolute; bottom:0px; right:0px;width:233px; height:73px;background:#F00;">sss</div>

	</div>

</div>

1)#img_down твой баннер

2)вместо оверфлоу, можно использовать clear после обертки.

html/css/jQuery верстка http://tony-art.ru/ (http://tony-art.ru/) icq: 295-249
Flash.UA
На сайте с 11.09.2007
Offline
46
Flash.UA
#6
kapyceJlb:
не стал копать ваш код,ибо он вырезан весьма неудобно, просто наклепал свой макет, основные его особености выделены красным.

<div id="container" style="border:1px solid #03C; overflow:auto; width:100%; position:relative;">
	<div id="left_block" style="float:left">
	тенется<br />
	тенется<br />
	тенется<br />
	тенется<br />
	тенется<br />
	тенется<br />
	тенется<br />
	тенется<br />
	тенется<br />
	</div>
	<div id="right_block" style="float:right;width:270px;background:#666;overflow: hidden;height: 100%;">
	sssss
	<div id="img_down" style="position:absolute; bottom:0px; right:0px;width:233px; height:73px;background:#F00;">sss</div>
	</div>
</div>

1)#img_down твой баннер
2)вместо оверфлоу, можно использовать clear после обертки.

Не совсем правильно, потому что при высоте блока right_block больше чем left_block он налезет на img_down, стоит ему добавить нижний отступ padding-bottom, равным высоте img_down.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий