Web page container alignment for navigation bar and main screen - html

Question

OK so I'm creating my first page and hit a brick wall here. I have a side navigation bar, main top navigation bar with containers below that for content. My problem is that the navigation bar on the left (seems) depicts the position of the carosel viewer container below the thre mini containers below the top navigation bar. EG The central containers begin at the lowest point of the navigation bar on the left.
See Images:
I'm trying to place the blue image carousel container directly below the three central mini containers but the highest up the page it will place itself is the bottom most point of the left side navigation bar. I'm very new to web page design this is not my thing and would like some help here.
I have copied the code into JS BIn for you to take a look at, I also notice there that the three mini contatiners below the top navigation bar are longer than my web page view so maybe it's those that are causing the problem and not the side nav bar??
JSBin link:
http://jsbin.com/dimekupo/1/watch?html,css,js,output
http://jsbin.com/dimekupo/1/edit?html,css,js,output
Many thanks

Answer 1

I wasn't able to get your code example to work for some reason but I but together a simpl example. This looks like a problem with floating. If you add float:left to your sidebar's CSS and float:right to the CSS of the carousel and the main content container that weird spacing should disappear.
Here's an example of what I'm talking about.
http://jsfiddle.net/7QzAu/3/
CSS
body {
width:900px;
margin:0 auto;
font:26pt Georgia;
color:#fff;
text-align:center;
}
#sidebar {
float:left;
width:200px;
height:400px;
background:Red;
}
#content {
width:700px;
float:right;
height:350px;
background:blue;
}
#below {
float:right;
width:700px;
height:200px;
background:green;
}
HTML
<div id="sidebar"></div>
<div id="content"></div>
<div id="below"></div>