Как правильно сверстать многоблочный DIV

[PaLyCH]

Хочу отказать от таблиц и полностью сверстать дизайн. Но произошел затык. Я не могу 1) отцентровать блок 2) правильно отобразить положение блоков. Что бы были рядом, а не по краям. Как это сделать? Вот пример трех блочной верстки. Left_c это левый блок, main правый блок. User2 находится под блоком user1.

<div id="all">
 <div id="left_c>
 <div id="user1"></div>
 <div id="user2"></div>
 </div>
 <div id="main"></div>
</div>

#all {
 width: 1000px;
 margin: 0 auto;
}
#left_c {
 width: 370px;
 float: left;
}
#main {
 width: 630px;
 padding-left: 370px;
}
#user1 {
 width: 100%;
 padding-left: 10px;
 float: left;
}
#user2 {
 width:100%;
 float: none;
 padding-left: 10px;
}

[Pavel_html]

а user1 и user2 находится по середине?

[Jaeser]

Ч? за этот код? Я со стула упал! Ты бы, создатель этого скромного кодика, почитал повнимательнее! Мда... Не забывай о position или, если нужны тексты, то text-align !

[Jaeser]

И еще, у тебя ошибки... например

 <div ud="main"></div>

что за чудо?

И где

[PaLyCH]

И еще, у тебя ошибки... например

 <div ud="main"></div>

что за чудо?

И где

Лишь те основы, которые касаются исключительно блоков DIV. На данный момент мной сделано 13 сайтов, и еще три в очереди. Как я описал в самом начале, в основном верстал только на таблицах, а их возможности меня не совсем устраивают. Вот и постоянно происходят затыки с позициями в различных браузерах.

Ошибки подправил, ну бывает, за это не стоит ругать.

[PaLyCH]

Ч? за этот код? Я со стула упал! Ты бы, создатель этого скромного кодика, почитал повнимательнее! Мда... Не забывай о position или, если нужны тексты, то text-align !

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

[klierik]

Как правильно сверстать многоблочный DIV

топикстартер, вы хоть поняли что написали???

где вы вообще в HTML видели многоблочный div???

На данный момент мной сделано 13 сайтов, и еще три в очереди. Как я описал в самом начале, в основном верстал только на таблицах, а их возможности меня не совсем устраивают. Вот и постоянно происходят затыки с позициями в различных браузерах.

эти "затыки" скорее всего от того что вы владеете малым кол-вом опыта.

и даже если вы сделаете хоть 100 сайтов то далеко не факт что вы будете уметь и знать 10ю часть того что знают, к примеру, гуру данного ресурса.

а если говорить по сабжу, я б вам настоятельно рекомендовал начать со статей по блочной верстки предоставленную Владом. Немного терпения и желание обучаться новому Вас направят на путь истинный.

зы: Блочная верстка это не панацея. Правильное решения для верстки любого блока страницы исходит из правильной оценки поставленной задачи.

[Mordraug]

для преведенного вами кода было бы логично сделать так (c комментариями):

html (будьте внимательнее с кавычками.. в вашем примере у left_c закрывающая отсутствовала.):

<div id="all">
 <div id="left_c">
 <div id="user1">user1</div>
 <div id="user2">user2</div>
 </div>
 <div id="main">main</div>
</div>

CSS:

#all {
 width:1000px; /* размер основного контейнера 1000px */
 margin: 0 auto; /* и он отцентрован относительно окна =) */
 overflow:auto; /* было бы неплохо, чтобы основной блок не схлопывался, когда содержимое изымается из потока */
 background:lime; /* для наглядности */
}

#left_c {
 width:370px; /* размер левой части 370px */
 float:left; /* и эта часть прижата влево с обтеканием по правому краю */
 background:yellow; /* для наглядности */
}

#main {
 width:auto; /* данная строчка означает, что блок займет все свободное пространство по горизонтали, строчку можно убрать, так как это значение div имеет "по-умолчанию" */
 margin:0 0 0 370px; /* отступ слева 370px (по размеру левого блока) */
 background:red; /* для наглядности */
}

#user1, #user2 { /* поскольку контейнеры идиентичны, логично объеденить их свойства путем группировки селекторов */
 width:auto; /* блок займет всю ширину родительского элемента (в данном случае #left_c = 370px ) */
 clear:both; /* запрещаем обтекание блока по сторонам.. тоесть все что вне блока - будет после него уже снизу */
 padding:0 0 0 10px; /* левое поле внутри блока 10px */
 background:orange; /* для наглядности */
}

ну и в заключении:

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

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

зы: Блочная верстка это не панацея. Правильное решения для верстки любого блока страницы исходит из правильной оценки поставленной задачи.

+1 но для того, чтобы выбирать из своего арсенала инструментов при оценке задачи, нужно этими инструментами владеть хотябы на базовом уровне.