I'm struggling with positioning the divs inside the header div on my page that has 3 parent divs. Here is a snippet of my code:
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>
The CSS looks 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 am trying to position the elements within the header div, such as vertically centering one element and placing another between the center and the right side horizontally. I would really appreciate any help or suggestions.
Thank you in advance!