У меня двойная колонка с использованием CSS:
<div id="nav"></div>
<div id="left_column"></div>
<div id="right_column"></div>
<div id="footer"></div>
#left_column{
float: left;
width: 463px;
display: inline-block;
margin-left: 12px;
}
#right_column{
float: right;
width: 463px;
display: inline-block;
margin-right: 12px;
}
#footer{
clear:both;
text-align: center;
padding: 40px;
}
Это прекрасно работает в Firefox, но создает проблемы в IE.Основная проблема заключается в том, что содержимое этих двух столбцов является динамическим и никогда не достигает одинаковой высоты, при этом один столбец иногда имеет большую высоту, чем другой.В IE левый и правый столбцы совпадают с нижним, что создает переменное количество пространства между более коротким столбцом и навигацией.Я хотел бы, чтобы столбцы были выровнены по верху / nav, а затем, когда элемент вставляется с ajax вверху left_column, он просто выталкивает содержимое в этом столбце вниз, а два столбца остаются выровненными сверху.Я надеюсь, что это имело смысл, любая помощь приветствуется.
...
На примере макета igoogle я добавил следующий css, и он, похоже, работает:
<div id="outside">
<div id="left_column"></div>
<div id="right_column"></div>
</div>
<div id="footer"></div>
#outside{
display: block;
float: none;
margin: 0 0 1em;
overflow: hidden;
position: static;
width: auto;
}
.column {
display: block;
width: 40%;
float: left;
margin-left: 0px;
}
Мне еще предстоит полностью реализовать его, но, похоже, это выравнивает столбцы с верхом независимо от высоты и расширяет / сужает верх как опорную точку.