Trying to create a sidebar layout.

Heyy. I am currently working on a little site for a friend and came across a pretty big problem. Okay so what I'm looking to have is a content area and sidebar area. I have successfully made the two divisions stay next to each other however, they seem to come off the bottom of the page. Bellow is a screen shot of what I mean along with my current html and css code.

Screen shot

http://img87.imageshack.us/i/whyn.png/

Html code

<div class="contentWrap">
            <div class="Content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel elit eu neque lobortis pulvinar a sed erat. Cras lacus felis, consequat sit amet commodo sit amet, viverra mollis ligula. Pellentesque porttitor commodo est et hendrerit. Nunc sit amet consectetur eros. Proin ut metus arcu. Duis blandit diam sed ante ultrices ut luctus eros dignissim. Praesent orci turpis, commodo eget lobortis vel, gravida nec nunc. Praesent convallis dictum elit, ac sollicitudin mi lobortis sit amet. Curabitur tristique malesuada ante, sit amet consequat dui pulvinar id. Maecenas rhoncus felis a felis vehicula in vulputate sem imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec pharetra enim ut dolor tempus bibendum. Etiam semper nisi non velit tincidunt euismod. Phasellus nisi dolor, rutrum in suscipit nec, hendrerit quis urna. Quisque suscipit placerat commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet lacinia mi. Mauris enim enim, tincidunt nec scelerisque vitae, hendrerit eget dolor. Aliquam purus nisl, mollis vitae volutpat at, fringilla vel lectus. Donec sed libero dolor.
            </div>
            <div class="sidebar">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel elit eu neque lobortis pulvinar a sed erat. Cras lacus felis, consequat sit amet commodo sit amet, viverra mollis ligula. Pellentesque porttitor commodo est et hendrerit. Nunc sit amet consectetur eros. Proin ut metus arcu. Duis blandit diam sed ante ultrices ut luctus eros dignissim. Praesent orci turpis, commodo eget lobortis vel, gravida nec nunc. Praesent convallis dictum elit, ac sollicitudin mi lobortis sit amet. Curabitur tristique malesuada ante, sit amet consequat dui pulvinar id. Maecenas rhoncus felis a felis vehicula in vulputate sem imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec pharetra enim ut dolor tempus bibendum. Etiam semper nisi non velit tincidunt euismod. Phasellus nisi dolor, rutrum in suscipit nec, hendrerit quis urna. Quisque suscipit placerat commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet lacinia mi. Mauris enim enim, tincidunt nec scelerisque vitae, hendrerit eget dolor. Aliquam purus nisl, mollis vitae volutpat at, fringilla vel lectus. Donec sed libero dolor.
            </div>
        </div>

HTML:

CSS code

.contentWrap {
	padding: 10px;
	margin: 0 auto;
}
.Content {
	width: 65%;
	float: left;
}
.sidebar {
	float: right;
	width: 30%;
}

Code (markup):

Any help will be massively appreciated.


Thanks,
Jordan

 

Try adding the following before your last div tag:

<div style="clear:both"></div>

HTML:

 

That worked perfectly. Thanks a million

 

better yet, put overflow:visible; on .contentWrap

 

overflow:hidden; on .contentwrap

overflow:visible; will still let it flow out of the content box and empty "clear" divs are just incorrect...despite the fact that they do work.