Nerf74
-
Posts
2 -
Joined
-
Last visited
Nerf74's Achievements
Explorer (1/14)
0
Reputation
-
Проблема с растягиванием сайдбара и контента к футеру
Nerf74 replied to Nerf74's question in HTML Coding
не помогло -
Здравствуйте! Такая проблема при верстке слоями (блоками): хочу сделать страницу с хедером, двумя колонками (левый сайдбар и контент) и футером. Сделал чтобы футер был прижат к низу страницы при помощи вставки пустого блока в конце контента и притягиванием выше (на размер этого пустого блока) футера. С футером все хорошо, сидит поживает себе спокойно снизу страницы, НО сайдбар и контент растягиваться сами до футера никак не хотят (честно, перепробовал уже кучу всяких примеров из гугла, скачивал готовые шаблоны - ничего не помогает ) В теории все просто: необходимо сделать так, чтобы 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; } Подскажите, пожалуйста, как решить проблему? Заранее большое спасибо!