Многие разработчики сталкиваются с некоторыми проблемами при верстке в несколько дивов. Основная проблема возникает в связи с тем, что разные браузеры по разному интерпретируют некоторые данные.

Я экспериментально нашел метод, при котором можно создавать множественное количество дивов и при этом быть уверенным, что все будет работоспособно в разных браузерах. Данную конструкцию проверял на всех современных браузерах: Mozilla, IE, Opera, Safari, Chrome.

И так, вот код. Пример с 4-мя дивами. По сути отличается лишь указанием процентной или пиксельной ширины (или как вам удобно):

HTML-код

<div id="container">
<div id="block1">25%</div>
<div id="block2">25%</div>
<div id="block3">25%</div>
<div id="block4">25%</div>
</div>

CSS-код

#container{
   clear:both;
   width:100%;
   min-width:800px; /*минимальная ширина, можно не указывать*/
   position:relative;
   overflow:hidden;
}
 
#block1{
   float:left;
   width:25%
}
 
#block2{
   float:left;
   width:25%
}
 
#block3{
   float:left;
   width:25%
}
 
#block4{
   float:left;
   width:25%
}

Вот и все :)

(Visited 80 times, 1 visits today)