Question

I’m having problems aligning the content region(in pink) and the nav region (in red ) on my site http://reesk.me/ (url displayed to show problem will be removed upon answer)

Any suggestions on how i can make this work? The html is

<div class="body">
<div id="header">
</div>
<div id="nav">
</div>
<div id="content">
</div>

</div>

and the css is

.body {
background-color: #111111;
min-height: 1000px;
width: 900px;
margin-right: auto;
margin-left: auto;
color:#FFFFFF;
}
#header {
background-color: #000000;
background-image: url(logo.png);
background-repeat:no-repeat;
height: 200px;
width: 100%; 

}
#nav{
width:200px;
min-height:300px;
background-color:red;

}

#content{
position:relative;
left:200px;
top:0px;
width:700px;
min-height:500px;
background-color:pink;
}

Answer 1

Are you trying to have the pink area next to the red one instead of below it? In that case, remove the relative positioning stuff and just have the #nav use float: left;.