div-ы (размещение)

[frp]

Нужно сделать такую вещь: есть див слева, див по центру и див справа (размеры дивов не указаны в CSS). Как установить размер дива по центру так, чтобы он занимал все пространство между дивом слева и дивом справа.

[Portnov]

Ну это какбе классика :) Могу посоветовать начать отсюда: http://softwaremaniacs.org/blog/category/web/primer/, ну и, извиняюсь, гугл в помощь.

Коротко - одним css так не сделать, если div'ы не вложенные. Если можно один в другой вложить - то можно использовать float'ы (у Сагалаева по ссылке об этом есть).

[Voral]

Достаточно просто. Нужен 1 дополнительный див.

Код: Выделить всё

<div class="mainWrp">
<div class="main">Центральный блок</div>
</div>
<div class="leftBox">
Левый
</div>
<div class="rightBox">правый</div>

В css

Код: Выделить всё

.mainWrp{
width:100%;
float:left;
}
.main{
margin:0 200px 0 300px;
overflow:hidden;
width:100%;
}
.leftBox{
 margin-left:-100%;
 width:300px;
float:left;
}
.rightBox{
margin-left:-200px;
width:200px;
float:left;
}

Тут могут быть некоторые непонятки в Осле. Решаемые Отличием соответствующего мариджина блока main и нужного столбика... ТОчно не помню уже, я обычно вообще разные значения мариджина и ширины использую, чтобы заодно сделать и отступ между блоками. Кроме того в главном блоке overflow:hidden; и width:100% также убираю в отдельный цсс файл предназначеный только для осла. Если эти строки вообще убрать, а в нутри этого блока окажется элемент с width:100% (да собственно с любой шириной в процентах), то ие будет колбасить т.к. осел будет за 100% считать всю ширину, а не ширину центрального столбика

[Poor Fred]

Достаточно просто. Нужен 1 дополнительный див.

Проще гораздо:

Код: Выделить всё

<style>
.main{
    width:100%;
}
.leftBox{
    float:left;
}
.rightBox{
    float:right;
}
</style>

Код: Выделить всё

<div class="main">
    <div class="leftBox">Левый</div>
    <div class="rightBox">правый</div>
    Центральный блок
</div>

[Voral]

Достаточно просто. Нужен 1 дополнительный див.

Проще гораздо:

ну ну.... А теперь задай (для примера) высоту левому и правому столбику 200px/. а в центральный вбей текст, который будет больше по высоте чем эти стольбики. Результаты посмотри в моем и в своем варианте...
а еще попробуй в центральную часть добавить таблицу или блок и задать ему width="100%"
Есть еще и дополнительный плюс у подхода который описал я: в случае если по каким-либо причинам цсс файл не будет получен браузером. У меня будет вверху страницы основной блок (согласиь это как правило центральный), потом левый, а потом правый. В твоем варианте основной будет в конце.


Впрочем, конешно, смотря что нужно автору вопроса.

[Poor Fred]

ну ну.... А теперь задай (для примера) высоту левому и правому столбику 200px/. а в центральный вбей текст, который будет больше по высоте чем эти стольбики. Результаты посмотри в моем и в своем варианте...

Код: Выделить всё

margin-bottom: 100%;

у боковых столбцов решают проблему.

Впрочем, конешно, смотря что нужно автору вопроса.

Именно. Всех случаев не предусмотришь.

[Voral]

Код: Выделить всё

margin-bottom: 100%;

у боковых столбцов решают проблему.

нет.
1. 100% - что это? Относительно чего? А если текста будет больше чем одно окно браузера?
2. Сделайте таблицу шириной 100% между этих столбцов....

Так, что ваш вариант подходит только для случаев с очень четкими ограничениями. Мой же более гибок

[Poor Fred]

Код: Выделить всё

margin-bottom: 100%;

у боковых столбцов решают проблему.

нет.
1. 100% - что это? Относительно чего? А если текста будет больше чем одно окно браузера?

Да.
Относительно родительского DIV'а. У меня в тестовом файле было именно больше одного экрана.

[frp]

В css
Код
.mainWrp{
width:100%;
float:left;
}
.main{
margin:0 200px 0 300px;
overflow:hidden;
width:100%;
}
.leftBox{
margin-left:-100%;
width:300px;
float:left;
}
.rightBox{
margin-left:-200px;
width:200px;
float:left;
}

Не совсем то. Меня интересует случай, когда ширина левого и правого дивов явно не указана

[Voral]

Не совсем то. Меня интересует случай, когда ширина левого и правого дивов явно не указана

Контент центрального блока заранее известен?
Там могут быть элементы с шириной в относительных единицах?

Пожалуй тебе подойжет немного докрученый способ от Poor Fred'a.

Код: Выделить всё

<HTML>
<style>
.main{
    width:100%;
}
.leftBox{
        float:left;
    height:100px;
    margin-bottom: 100%;
}
.rightBox{
        float:right;
    height:100px;
    margin-bottom: 100%;
}
.centerBox{
    overflow:hidden;
}
</style>
</HEAD>
<div class="main">
    <div class="leftBox">Левый</div>
    <div class="rightBox">правый</div>
    <div class="centerBox">
            Центральный блок
        <table border="1" width="100%"><TR><TD>dfkjfjg</TD></TR></table>
            Центральный блок
    </div>
</div>

</BODY>
</HTML>

если уверен в контенте центрального стобика то можеш смело выкидывать блок centerBox и его описание в стилях.....
Правда я не тестировал это, но в целом вроде должно сработать. В осле надо посмотреть.....