divs在標題和主要位置的問題

Question

我有一個頁面有3個父divs，現在我有問題在div div內定位div。 我的代碼是這樣的：

的div佈局：

<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的位置（例如垂直：中心，水平方向：0px（左側不是整個頁面的標題div的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/