Проблема с растягиванием сайдбара и контента к футеру

Nerf74 · June 11, 2012

Здравствуйте! Такая проблема при верстке слоями (блоками): хочу сделать страницу с хедером, двумя колонками (левый сайдбар и контент) и футером. Сделал чтобы футер был прижат к низу страницы при помощи вставки пустого блока в конце контента и притягиванием выше (на размер этого пустого блока) футера. С футером все хорошо, сидит поживает себе спокойно снизу страницы, НО сайдбар и контент растягиваться сами до футера никак не хотят (честно, перепробовал уже кучу всяких примеров из гугла, скачивал готовые шаблоны - ничего не помогает )

В теории все просто: необходимо сделать так, чтобы sidebar и content занимали все доступное место в блоке conteiner2.. есть мысля, что через позиционирование делать, но как?

код html файла:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="language" content="ru" /> 
<meta name="description" content="блаблабла" /> 
<meta name="keywords" content="бла, бла, бла" /> 
<title>test</title> 
<link rel="stylesheet" type="text/css" href="style.css">
</head> 
<body>
<div id="container1">
	<div id="header">
	HEADER
	</div>
	<div id="container2">
		<div id="sidebar"> 
		SIDEBAR
		</div>
		<div id="content">  
		CONTENT
		</div>
	</div>
	<div class="clearfloat"></div>
	<div id="emptyspace"></div>
</div>
<div id="footer"> 
FOOTER
</div>
</body>
</html>

код внешнего файла стилей (style.css):

* { 
border: 0; 
margin: 0; 
padding: 0;
} 

html { 
height: 100%;
width: 100%;
background-color: white;
text-align: center;
} 

body {
height: 100%;
width: 960px;
margin: 0 auto;
}

#container1 {
height:auto !important;
height:100%;
min-height:100%;
min-width:960px;
margin: 0 auto;
} 

#header {  
width: 960px; 
height: 120px;
background-color: brown; 
margin: 0 auto; 
}   

#sidebar {
float: left;
background-color: red;
width: 200px;
margin: 10px auto 0;
} 

#content {
float: right;
background-color: yellow;
width: 740px;
margin: 10px auto 0;
}

#emptyspace { 
height: 130px;
} 

.clearfloat {
clear: both;
}

#footer {
background-color: blue;
width: 960px;
height: 120px;
margin: -120px auto 0;
}

Подскажите, пожалуйста, как решить проблему? Заранее большое спасибо!

Ergonav · June 12, 2012

#container1 {clear:both;
overflow:hidden;
}

Edited June 12, 2012 by Ergonav

Nerf74 · June 12, 2012

#container1 {clear:both;
overflow:hidden;
}

не помогло

Ergonav · June 12, 2012

#container1 {clear:both;
overflow:hidden;
}
не помогло

А мне помогло, стукни в аську 648822

m2141 · June 13, 2012

У меня тоже это никак не получалось.

И с вставкой данного кода тоже...

Как это вообще влияет на высоту, за счет чего сайдбар и контент растянутся?

Вот тут пишут, что этого в принципе и не должно быть естественный путем

http://htmlbook.ru/samlayout/tipovye-makety/kolonki-odinakovoi-vysoty

Sign In

Проблема с растягиванием сайдбара и контента к футеру

Question

Nerf74

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Ergonav

Link to comment

Share on other sites

Nerf74

Link to comment

Share on other sites

Ergonav

Link to comment

Share on other sites

m2141

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information