Как расположить несколько блоков div в ряд?

alexlip

Administrator
LV
0
 
Пример горизонтального расположения нескольких блоков <div>

Для такого расположения блоков - всем 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 для другого. Очень важно, чтобы общая ширина блоков не превышала ширину страницы, иначе ничего не получиться и один блок сместиться в нужную сторону, но располагаться будет под соседним!

Вот так все просто и легко
 
Но есть и другой вариант сделать такое:

Код:
<table><tr><td>БАННЕР</td><td>БАННЕР</td></tr></table>
 
Сверху