Верстка: не могу победить position, overflow, float и т.п.

[eiti]

Здравствуйте. Пожалуйста, расскажите понятным языком как позиционировать дивы. Я правда гуглил и много читал, но что-то ускользает от понимания. Когда дивов немного все получается, если много получается бардак. Ну вот как пример:

скрин:

структура:

<div class="user_menu">
     <div class="user_menu_top">
       <div class="user_menu_foto"> </div> 
       <div class="user_menu_info"> тут будет несколько дивов. инфа будет подгружаться с базы</div>
     </div> <!--end user menu top-->

    <div class="user_menu_left"> 
       <div class="user_menu_left_button">кнопка</div>    
       <div class="user_menu_left_button">кнопка</div> 
       <div class="user_menu_left_button">кнопка</div> 
    </div><!--end user_menu_left-->

         <div class="user_menu_content">тут будет много дивов. инфа будет подгружаться скриптами из базы</div> 

</div><!--end user menu -->

стили:

/*————--user menu———————--*/
.user_menu{width:100%; height:auto; margin:2px;}
.user_menu_top{width:100%; height: 150px; border:#CCC 1px solid; border-radius:5px; position:relative;overflow: hidden; }
.user_menu_info{width:770px; height:146px; float:left; background:#F2F2F2; margin: 2px 5px;border-radius:5px;}
.user_menu_foto{width:150px; height:150px;   background:url(../images/ss_02%5B1%5D.jpg); float:left; }
.user_menu_left{ width:150px; height:auto; }
.user_menu_left_button{width:150px; height:30px; background:url(../images/menu_035_bg.jpg) repeat-x; margin-top:5px; border:#CCC 1px solid; border-radius:5px;}
.user_menu_content{width:770px; height:96px; float:left; background:#F2F2F2; margin: 2px 5px;border-radius:5px;  }

/*————--end user menu———————--*/

запутался с position, overflow и прочими float.

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

в данном случае <div class="user_menu_content"> никак не хочет вставать в правый верхний угол (см картинку).

подскажите, пожалуйста как правильно и кроссбраузерно все это сделать.

п.с. сорри за аву. дальше все будет скучно, а так хоть что-то жизнеутверждающее.

п.п.с. если надо то вот http://jsfiddle.net/TVH2V/

Edited August 25, 2011 by eiti
Картинку заменить, здесь бывают дети!

[eiti]

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

.user_menu_content{width:770px; height:auto; background:#F2F2F2; margin: 2px 5px;border-radius:5px; position:absolute; right:2px; top:160px;  }

Edited August 25, 2011 by eiti

[Softlink]

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

Вот для резины, а здесь для фикс ширины.

[eiti]

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

Вот для резины, а здесь для фикс ширины.

совершенно верно подмечено. проблема с непониманием "правильно разметить каркас"

есть дивы header, general, footer которые будут перенесены в пхп файл и в которых будет много своих дивов со своими пхп файлами.

как правильно, оопно, прости господи, и кросбраузерно сделать разметку?

какие им свойства задавать? position:absolute, overflow:hidden, float?

оффтоп: я несколько лет не мог осознать, что такое ООП. а потом вставило, оказывается с самого начала изучения был приверженцем этого ООП.

надо как-то другими словами (бытовыми что-ли) объяснить как правильно делать. Вам несложно?

Edited August 25, 2011 by eiti

[Softlink]

мм.. ну так вроде бы же дал ссылки на типовые макеты. Там можно посмотреть как это делается, или в чем проблема-то? Сделайте каркас как там показано, а потом внутрь основных блоков вставляйте содержимое.

Это я все к тому, что если надо сделать код за вас, то я сделаю тоже самое, как и там показано, т.е. смысла нет этим заниматься. Если вы запутались, то попробуйте все заново переверстать. Я не стеснялся так делать, когда только начинал верстать. Вместе с этим приходит понимание как и что работает

[eiti]

мм.. ну так вроде бы же дал ссылки на типовые макеты. Там можно посмотреть как это делается, или в чем проблема-то? Сделайте каркас как там показано, а потом внутрь основных блоков вставляйте содержимое.

Это я все к тому, что если надо сделать код за вас, то я сделаю тоже самое, как и там показано, т.е. смысла нет этим заниматься. Если вы запутались, то попробуйте все заново переверстать. Я не стеснялся так делать, когда только начинал верстать. Вместе с этим приходит понимание как и что работает

хм, попробуем подругому - возвращаемся к первому топику темы и к вашему первому комментарию.

что я неправильно разметил?

*на всякий случай - я не ругаюсь, я пытаюсь разобраться

[Softlink]

не совсем понятно, что должно получиться в итоге, но некое подобие удалось сделать используя ваш код

http://jsfiddle.net/u5KKy/

[eiti]

не совсем понятно, что должно получиться в итоге, но некое подобие удалось сделать используя ваш код

http://jsfiddle.net/u5KKy/

дивы переместились по другому. включу фаербаг и буду курить overflow.

большое спасибо.

[Softlink]

включу фаербаг и буду курить overflow.

Замутите микс из overflow, float и margin. Должно торкнуть