xhtml squeletone:
CODE
<html>
<head>
</head>
<body>
<div id="container">
<div id="header">
<div id="searchEngine">
<!-- Search Engine Markup >
</div>
</div>
<div id="header2">
</div>
<div id="primarynav">
<!-- primary nav Markup >
</div>
<div id="content">
<!-- content Markup >
</div>
</div>
</body>
</html>
This is the css code applied to the previous markup:
CODE
#container {
position: absolute;
left: 50%;
width: 770px;
top: 20px;
margin-left: -385px;
background: #cccccc;
}
#primarynav {
position: relative;
width: 160px;
background: #333333;
margin: 0px;
padding: 0px;
float: right;
}
#header2 {
position: relative;
background: #999999;
height: 150px;
width: 40px;
float: right;
}
#header {
position: relative;
background: #999999;
height: 150px;
width: 570px;
float: left;
background: url(../images/background.jpg) top left no-repeat;
}
#content {
position: relative;
float: left;
overflow: auto;
background: #cccccc;
width: 570px;
margin: 0px;
padding: 0px;
}
Right now i am obtaining the next output:
But i want to obtain an output in which the primary nav goes until the bottom of the container as shown in the figure:
Any idea how can i manage to do that with CSS?
Help is really, really appreciated.
