divs problems with position in header and main
i have a page with 3 parent divs , now im having problems putting the div inside 3 parents.
my code is something like this:

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 is something like this:

.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; 
}



i want to put in a position of header div (e.g.  vertical: center , horizontal: 0 px (0 pixels of the header div not of the total page) on left side) and menu in other position (e.g. vertial: top , horizontal: between the center and right side (center and right side of header div only again).

i would appreciate a solution.


thanks to all.
divs problems with position in header and main
===

i have a page with 3 parent divs , now im having problems putting the div inside 3 parents.
my code is something like this:

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 is something like this:

.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; 
}



i want to put in a position of header div (e.g.  vertical: center , horizontal: 0 px (0 pixels of the header div not of the total page) on left side) and menu in other position (e.g. vertial: top , horizontal: between the center and right side (center and right side of header div only again).

i would appreciate a solution.


thanks to all.