проблемы с положением в заголовке и главном

Question

У меня есть страница с 3 родительскими элементами div, теперь у меня проблемы с размещением элементов div внутри заголовка div.мой код выглядит примерно так:

divs layout:

<div id="layout">
    <div id="header" class="body">
        header
        <div id="logo">logo</div>
        <div id="menu">menu</div>
    </div>
    <div id="main">
        <div id="left">left</div>
        <div id="right">right</div>
        <div id="body">body</div>
        <div id="clear"></div>
    </div>
    <div id="footer">footer</div>
</div>

css выглядит примерно так:

.body {
 background-color: #ffffff;
 margin: 0px;
 background-repeat: repeat-x;
 background-image: url(imgs/back.png);
}

#layout {
 margin:auto;
 width: 1024px;
 background-color:  #ffffff;
}

#main {
   background-color:  #ffffff; 
}

#header {
 background-color:#0F0;
 height: 300px;
}

#body {
 margin-left: 180px;
 margin-right: 180px;
 padding: 5px;
 background-color:  #ffffff;
}

#footer {
 margin-left: 180px;
 margin-right: 180px;
 padding: 0px;
 background-color:  #ffffff;
}

#right {
 float: right;
 width: 180px;
 padding: 0px;
 margin: 0px;
 right: 0px;
    background-color:  #ffffff;
}

#left {
 float: left;
 width: 180px;
 padding: 0px;
 margin: 0px;
 left: 0px;
 background-color:  #ffffff;
}

#clear {
   clear:both; 
}

я хочу поставить в позицию заголовка div(например, по вертикали: центр, по горизонтали: 0 пикселей (0 пикселей заголовка, а не всей страницы) с левой стороны) и меню в другом положении (например, по вертикали: сверху, по горизонтали: между центром и правой стороной (по центру и справа)сторона заголовка div только снова).

Буду признателен за решение.

спасибо всем.

Answer 1

Я мог бы быть более полезным, если бы вы могли прояснить свой вопрос.

Я не уверен в том, что вы просите с точки зрения местоположения для заголовка.

Вот подход к перемещению меню между центром и правым столбцом. Вложите меню и правую колонку в другой выровненный по правому краю div. Для примера я назвал это right-container.

Вот HTML

<div id="layout">
    <div id="header" class="body">
        header
        <div id="logo">logo</div>
    </div>
    <div id="main">
        <div id="left">left</div>
        <div id="right-container">
           <div id="menu">menu</div>
           <div id="right">right</div>
        </div>
        <div id="body">body</div>
        <div id="clear"></div>
    </div>
    <div id="footer">footer</div>
</div>​

А вот операторы css, которые я добавил:

#right-container {
 float: right;
 width: 360px;
 padding: 0px;
 margin: 0px;
 right: 0px;
    background-color:  #ffffff;
}

#menu {
 float: left;
 width: 180px;
 padding: 0px;
 margin: 0px;
 left: 0px;
 background-color:  #ffffff;
}

Вы можете увидеть скрипку здесь:

http://jsfiddle.net/SkLvX/