Пример горизонтального расположения нескольких блоков <div>
Для такого расположения блоков - всем div-ам присваиваем параметр float:left; и радуемся жизни! Для примера раположим несколько блоков <div> по горизонтали:
Если нужно расположить два больших блока в один ряд, тогда нужно параметрам float:...; задать значения left для одного и right для другого. Очень важно, чтобы общая ширина блоков не превышала ширину страницы, иначе ничего не получиться и один блок сместиться в нужную сторону, но располагаться будет под соседним!
Вот так все просто и легко
Для такого расположения блоков - всем div-ам присваиваем параметр float:left; и радуемся жизни! Для примера раположим несколько блоков <div> по горизонтали:
Код:
------- установим стили блока DIV --------
#liniya {
width:110px;
height:50px;
background:#669900;
float:left;
margin-left:15px;
text-align:center;
}
---------- вставим блоки на страницу ---------
<div style=" width:100%; height:1px; clear:both;">.</div> чтобы не лезли вверх
<div id="liniya">DIV - 1</div> <div id="liniya">DIV - 2</div> <div id="liniya">DIV- 3</div>
<div id="liniya">DIV - 4</div><div id="liniya">DIV - 5</div><div id="liniya">DIV - 6</div>
<div style=" width:100%; height:1px; clear:both;"></div> чтобы ничего не влезало снизу
Если нужно расположить два больших блока в один ряд, тогда нужно параметрам float:...; задать значения left для одного и right для другого. Очень важно, чтобы общая ширина блоков не превышала ширину страницы, иначе ничего не получиться и один блок сместиться в нужную сторону, но располагаться будет под соседним!
Вот так все просто и легко