HTML+CSS+JavaScript

Здравствуйте.
Помогите организовать следующую вещь:

<div id="main">     <div style="width: 200px;" id="box"></div>     <div style="width: 200px;" id="box"></div>     <div style="width: 200px;" id="box"></div> </div>

"main" растянута на всю ширину страницы, количество "box" неизвестно, т.е. N штук, должны быть в одну строку, насколько позволяет страница, остальные переносятся на следующую строку и т.д.. Как сделать чтобы BOX были равномерно распределены по ширине в MAIN?

Не задавая ширины вложенным дивам, используй в каждом: float: left;

>Как сделать чтобы BOX были равномерно распределены по ширине в MAIN?
Полагаю, что вопрос надо задать так: как расположить рядом блоки с фиксированной шириной?

В этом случае, решение следующее:

<style>    #main div {       float: left;    } </style>

как расположить рядом в строку это понятно, через float, но они все прижаты к левой стороне родительского дива. а мне надо чтобы они были распределены в родительском равномерно по ширине.

сейчас так:

|-------------------------------------MAIN-----------------|
||-----box------||-------box------||------box-------| |
||-----box------||-------box------| |
|-------------------------------------------------------------|

а должно так:

|-------------------------------------MAIN-----------------|
| |-----box------| |-------box------| |------box-------| |
| |-----box------||-------box------| |
|-------------------------------------------------------------|

ширина BOX фиксирована и количество в строке зависит от ширины страницы

вот как такое реализовать я никак не догоню:(

Только table.
либо если у вас скрипт определять кол-во элементов в строке и ее делим на 100:

<? $num = 7; $width = 100/$num;  echo "<div style='width:".$width."%;'></div>"; ?>

Так можно, но это будет на фиксированное количество в строке, а хотелось бы на произвольное

Почему фиксировано та, 7 это я задал просто для примера, вам суда нужно записать кол-во ваших колонок, если вы конечно используете php код.

теперь понял. а как тогда вычислить сколько вложенных дивов получится при данной ширине родительского дива? и если пользователь будет растягивать окно то надо пересчитывать ширину родительского и ширину вложенных дивов?

сейчас у меня так:

<div align="center" style="border: 1px dashed red;display: inline-block;"> {foreach key=key item=categor from=$main_categor name=maincategor} <div style="width: 200px;border: 1px solid red;float: left;">     <a href="{$categor.url}" title="{$categor.name}">{$categor.name}</a> </div> {/foreach} </div>

но они выровнены по левой стороне а как по центру или по всему свободному (типа justify)?

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

1) надо чтобы они были распределены в родительском равномерно по ширине
2) ширина BOX фиксирована

Вы сами хоть понимаете, как это будет выглядеть?

Абсолютно!

сейчас так:

|-------------------------------------MAIN-----------------|
||-----box------||-------box------||------box-------|___|
||-----box------||-------box------|______________|
|-------------------------------------------------------------|

а должно так:

|-------------------------------------MAIN--------------------------|
|__|-----box------|__|-------box------|__|------box-------|__|
|_________|-----box------|__|-------box------|________|
|----------------------------------------------------------------------|

_-это пустое место
ширина BOX фиксирована и количество в строке зависит от ширины страницы

http://www.artlebedev.ru/tools/technogrette/html/thumbnails-center/

display: inline-block

это для какого Дива?

у меня сейчас так:

<div align="center" style="border: 1px dashed red;display: inline-block;"> {foreach key=key item=categor from=$main_categor name=maincategor} <div style="width: 200px;border: 1px solid red;float: left;">     <a href="{$categor.url}" title="{$categor.name}">{$categor.name}</a> </div> {/foreach} </div>

Вы хоть читали об этом свойстве?
В общем, AlexSol уже Вам дал, сходите там все есть

HTML:

<div class="objects">  <span class="under">&nbsp;</span>      <div class="cell">Ячейка</div>     <div class="cell">Ячейка</div>     <div class="cell">Ячейка</div>     <div class="cell">Ячейка</div> <span class="under">&nbsp;</span>  </div>

CSS:

.objects {     text-align: justify;     text-justify: newspaper; }     .objects .cell {         border: 1px solid #9DA5D6;                 width: 156px;         height: 175px;         text-align: center;         display:inline-block;         display: -moz-inline-box;                 vertical-align: top;     }         * html .objects .cell {         display: inline;     }     * + html .objects .cell {         display: inline;     }             .objects .under {         display:-moz-inline-box;         display:inline-block;         width: 100%;     }

http://unesco.ru/ru/?module=objects&action=list

У Токмакова получше будет ИМХО. И нет хаков под ИЕ6,7