[coffe_drinker]

Хочу получить таблицу из 6 столбцов, шириной 600px (по 100px каждый). Есть такой фрагмент кода. Но в результате получается таблица с 1 столбцом, т.е. все элементы располагаются друг под другом. Помогите исправить, плз.

<div style="width: 600px;">
<div style="width: 100px; float: center; border: 1px solid black; text-align: center;"><img src="картинка 1.jpg" style="float: center; margin: 5px;" />
<p>Подпись под картинкой 1</p>
</div>
<div style="width: 100px; float: center; border: 1px solid black; text-align: center;"><img src="картинка 2.jpg" style="float: center; margin: 5px;" />
<p>Подпись под картинкой 2</p>
</div>
<div style="width: 100px; float: center; border: 1px solid black; text-align: center;"><img src="картинка 3.jpg" style="float: center; margin: 5px;" />
<p>Подпись под картинкой 3</p>
</div>
<div style="width: 100px; float: center; border: 1px solid black; text-align: center;"><img src="картинка 4.jpg" style="float: center; margin: 5px;" />
<p>Подпись под картинкой 4</p>
</div>
<div style="width: 100px; float: center; border: 1px solid black; text-align: center;"><img src="картинка 5.jpg" style="float: center; margin: 5px;" />
<p>Подпись под картинкой 5</p>
</div>
<div style="width: 100px; float: center; border: 1px solid black; text-align: center;"><img src="картинка 6.jpg" style="float: center; margin: 5px;" />
<p>Подпись под картинкой 6</p>
</div>
<div style="width: 100px; float: center; border: 1px solid black; text-align: center;"><img src="картинка 7.jpg" style="float: center; margin: 5px;" />
<p>Подпись под картинкой 7</p>
</div>
</div>​

[vladendark]

float: center;

css 4.0? )) флотать можно только вправо или влево
для всех дивов float: left/
+ вы не умеете считать? вы обернули 7 дивов шириной по 100px в один, шириной 600.

[redreem]

вот кусок - я делал для себя. тут 3 колонки. по аналогии можно лепить любое воличество.
<div style="position:relative;width:100%;overflow: hidden;">
<div id="col_l" style="position:relative;float:left;display: inline;"></div>
<div id="col_c" style="position:relative;float:left;display: inline;"></div>
<div id="col_r" style="position:relative;float:left;display: inline;"></div>
</div>

Добавлено через 1 минуту

оборачивать во внешний див - обязательно.

[vladendark]

Сообщение от redreem

оборачивать во внешний див - обязательно.

обязательно. вот только у вас внешний див width="600px"
и 7 внутренних дивов width="100px"

7*100=700>600 улавливаете суть?

короче css

.container {
margin-left: auto;
margin-right: auto;
width: 700px;
}

.grid,
{
display:inline;
float: left;
position: relative;
margin-left: 0px;
margin-right: 0px;
}

.container .grid {
width:100px;
}

.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}

и html

<div class="container">
<div class="grid">1</div>
<div class="grid">2</div>
<div class="grid">3</div>
<div class="grid">4</div>
<div class="grid">5</div>
<div class="grid">6</div>
<div class="grid">7</div>
<div class="clear"></div>
</div>

[redreem]

vladendark если человек думает, то с ширИнами он уж разберется - принципиальный момент - правильная расстановка floatoв и display:inline у внутренних и overflow: hidden у внешнего.

[coffe_drinker]

Сообщение от vladendark

css 4.0? )) флотать можно только вправо или влево
для всех дивов float: left/
+ вы не умеете считать? вы обернули 7 дивов шириной по 100px в один, шириной 600.

7-й див перенесеться на новую строку, что мне и нужно, так что тут все норм. только ширину рамки не посчитал

а за float спасибо большое))