Пример с этого сайта разваливается

ganers · July 22, 2011

Делаю сайт, макет сверстан по типу примера с вашего сайта

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>

Vlad · July 22, 2011

Для #content прописать overflow: hidden; и убрать <div style="clear:both"></div>.

ctpz · July 22, 2011

Способ 1

HTML код:

<div class=”base”>
 <ul class=”base-row”>
 <li class="cell1"><div class="content1" >.....Lots of Content....</div></li>
 <li class="cell1"><div class="content2">.....Lots of content....</div></li>
 <li class="cell1"><div class="content3">.....Lots of content....</div></li>
 </ul>
 </div>

CSS:

.base {
 /*make it 100% width and a minimum of 1000px width*/
 width: auto;
 margin-left: 0px;
 margin-right: 0px;
 min-width: 1000px;
 padding: 0px;
 display:table;
 }
 .base-row {
 Display: table-row;
 }
 .base li {
 display: table-cell;
 width: 33%;
 }
 .cell1 {
 background-color: #f00;
 }
 .cell2 {
 background-color: #0f0;
 }
 .cell3 {
 background-color: #00f;
 }

Способ 2

<div class=”container”>
 <div class=”leftsidebar”> … Lots Of Content … </div>
 <div class=”content”> …. Lots Of Content … </div>
 <div class=”rightsidebar”> … Lots Of Content … </div>
 </div>

CSS:

.container {
 Width: 900px;
 Margin-left: auto;
 Margin-right: auto;
 }
 .leftsidebar {
 Float: left;
 Width: 33%;
 }
 .content {
 Float: left;
 Width: 33%;
 }
 .rightsidebar {
 Float: left;
 Width: 33%;
 }

Javascript ( jQuery):

function setEqualHeight(columns)
 {
 var tallestcolumn = 0;
 columns.each(
 function()
 {
 currentHeight = $(this).height();
 if(currentHeight > tallestcolumn)
 {
 tallestcolumn = currentHeight;
 }
 }
 );
 columns.height(tallestcolumn);
 }
 $(document).ready(function() {
 setEqualHeight($(".container > div"));
 });

Edited July 22, 2011 by ctpz

ganers · July 22, 2011

Спасибо за оперативную помощь. Вариант с overflow:hidden, работает отлично. Единственное я не могу понять как он работает.

Vlad · July 22, 2011

overflow отменяет действие плавающих элементов, если у него значение auto, scroll или hidden.

Sign In

Пример с этого сайта разваливается

Question

ganers

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

ctpz

Link to comment

Share on other sites

ganers

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information