ganers
-
Posts
2 -
Joined
-
Last visited
ganers's Achievements
Explorer (1/14)
0
Reputation
-
Спасибо за оперативную помощь. Вариант с overflow:hidden, работает отлично. Единственное я не могу понять как он работает.
-
Делаю сайт, макет сверстан по типу примера с вашего сайта http://htmlbook.ru/layout/fiksirovannaya-shirina-tri-kolonki Добавляю в блок content новые блоки через float:left, что-бы создать новую строку с блоками соответственно <div style="clear:both"></div>, но остальные блоки выравниваются по высоте левой и правой колнки макета. Как можно решить данную проблему? Вот полный код: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Трехколоночный макет</title> <style type="text/css"> body { font: 0.8em Arial, Helvetica, sans-serif; /* Шрифт на веб-странице */ background: #D7E1F2; /* Цвет фона */ color: #ffe; /* Цвет текста */ } a { color: #008BCE; /* Цвет ссылок */ } #container { width: 500px; /* Ширина макета */ margin: 0 auto; /* Выравниваем по центру */ background: #FCE600; /* Цвет колонок */ } #header { font-size: 2.2em; /* Размер текста */ text-align: center; /* Выравнивание по центру */ padding: 5px; /* Отступы вокруг текста */ background: #D71920; /* Цвет фона шапки */ } #nav, #aside { float: left; width: 110px; padding: 5px; } #content { background: #54B948; margin: 0 120px; /* Ширина колонок */ padding: 10px; } #aside { float: right; color: #000; } h2 { margin: 0 0 1em; } #footer { clear: both; /* Отменяем действие float */ padding: 5px; /* Отступы вокруг текста */ background: #D71920; /* Цвет фона подвала */ } /* _______________________ Модуль - галерея _______________________ */ .mod_gal_imgcontainer {float:left;border:1px solid #ddd;margin:3px;padding:0;} .mod_gal_header {color:#333;background-color:#F4F4F4;border-bottom:1px solid #ddd;padding:5px} .mod_gal_img {padding:10px} .mod_gal_kbsize {color:#999;text-align:center;margin-top:3px} </style> </head> <body> <div id="container"> <div id="header">Исторический турнир</div> <div id="nav"> <p><a href="stat.html">Статистика турнира</a></p> <p><a href="interview.html">Интервью с главным судьей</a></p> <p><a href="ask.html">Конкурсные вопросы</a></p> </div> <div id="aside"> <h3>Статистика</h3> <p>одиннадцать человек дошли до финала;</p> <p>один человек правильно указал в каком стиле писал Диего Веласкес;</p> <p>только один человек знал, кто изобрел пароход;</p> </div> <div id="content"> <div class="mod_gal_imgcontainer">1 блок</div> <div class="mod_gal_imgcontainer">1 блок</div> <div class="mod_gal_imgcontainer">1 блок</div> <div style="clear:both"></div> <div class="mod_gal_imgcontainer">2 блок</div> <div class="mod_gal_imgcontainer">2 блок</div> <div class="mod_gal_imgcontainer">2 блок</div> <div style="clear:both"></div> <div class="mod_gal_imgcontainer">3 блок</div> <div class="mod_gal_imgcontainer">3 блок</div> <div class="mod_gal_imgcontainer">3 блок</div> </div> <div id="footer">© Влад Мержевич</div> </div> </body> </html>