Я начинаю с CSS и столкнулся с проблемой «равной высоты столбца», где плавающие DIV имеют разную высоту в зависимости от их содержимого.Я нашел несколько обходных путей и попытался применить этот , но все же успешно: в трехколоночном макете все три столбца расширены, но левый и правый столбец, кажется, перекрываются с разделом нижнего колонтитула.(Это происходит в IE 8 и в FF 3.5.10) Вот картинка:
альтернативный текст http://img706.imageshack.us/img706/4930/testrz.jpg
Я бы хотел, чтобы все три столбца были одинакового размера и размещены между нимиверхний и нижний колонтитулы.Вот HTML-код:
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>Left</p>
</div>
<div id="rightnav">
<p>RightNav</p>
</div>
<div id="content">
<p>Content</p>
</div>
<div id="footer">
<h4>Footer</h4>
</div>
</div>
</body>
, а здесь текущий CSS-код:
body
{
font-family: Verdana, Sans-Serif;
font-size:0.75em;
line-height:1.5em;
margin:1.5em;
}
#container
{
overflow:hidden;
min-width: 50em;
margin: 0.625em auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
}
#top
{
padding: 0.5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
#top h1
{
padding: 0;
margin: 0;
}
#leftnav
{
float: left;
width: 10em;
margin: 0;
padding: 1em;
background-color:#ec7;
}
#rightnav
{
float: right;
width: 10em;
margin: 0;
padding: 1em;
background-color:#db6;
}
#content
{
margin-left: 10em;
margin-right: 10em;
padding-left:3em;
padding-right:3em;
padding-top:1em;
min-width:10em;
text-align:justify;
background-color:#bab;
}
#leftnav, #rightnav, #content
{
padding-bottom:1000em;
margin-bottom:-1000em;
}
#footer
{
clear: both;
margin: 0;
padding: 0.5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
Как видите, я новичок в CSS, и выше приведен результат копирования /Вставить и различные настройки, которые я пытался, поэтому любая помощь приветствуется,
(я разместил этот вопрос в другом месте, но без ответа.)