DIV Same Height
Did you have a problem with 2 DIV, just called it sidebar and content with different height beacause of the content. It’s make your design not good enough. Just like image bellow.
DIV not same height
The Example above show the different height in sidebar and content beacause of the content.
To make the height DIV same you can try with javascript, but in this post I will show with CSS.
<style type="text/css">
body {margin:0; padding:0; font-family:arial; font-size:12px;}
#container { overflow: hidden; width:800px; margin:10px auto; border:1px solid #000; }
<!-- #container div { float: left; background: #ccc; margin-bottom: -9000px; padding-bottom: 9000px; } -->
#container .col1 { background: #d46b6b; width: 260px; padding:10px; float: left; margin-bottom: -9000px; padding-bottom: 9000px; }
#container .col2 { background: #6bd49d; width: 500px; padding:10px; float: right; margin-bottom: -9000px; padding-bottom: 9000px; }
</style>
this is the complete HTML+CSS page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Equal Height Columns</title>
<style type="text/css">
body {margin:0; padding:0; font-family:arial; font-size:12px;}
#container { overflow: hidden; width:800px; margin:10px auto; border:1px solid #000; }
<!-- #container div { float: left; background: #ccc; margin-bottom: -9000px; padding-bottom: 9000px; } -->
#container .col1 { background: #d46b6b; width: 260px; padding:10px; float: left; margin-bottom: -9000px; padding-bottom: 9000px; }
#container .col2 { background: #6bd49d; width: 500px; padding:10px; float: right; margin-bottom: -9000px; padding-bottom: 9000px; }
</style>
</head>
<body>
<div id="container">
<div class="col1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ac lectus ac ligula cursus ullamcorper. Aliquam iaculis nonummy libero. Nulla nisi libero, faucibus quis, egestas non, congue vel, dolor. Nulla facilisi. Quisque non metus malesuada libero suscipit cursus. Nam eget metus. Aliquam non quam. Integer sit amet pede eu est gravida fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vulputate tempus felis. Vestibulum tincidunt elit sit amet est. Sed ultricies tempus enim. Curabitur quam augue, fringilla ac, imperdiet et, dignissim sit amet, erat. Aenean ornare. Quisque turpis neque, suscipit pretium, aliquet sed, eleifend vitae, elit. Ut velit neque, venenatis non, convallis at, nonummy tincidunt, nisl. Morbi sapien.</p>
</div>
<div class="col2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ac lectus ac ligula cursus ullamcorper. Aliquam iaculis nonummy libero. Nulla nisi libero, faucibus quis, egestas non, congue vel, dolor. Nulla facilisi. Quisque non metus malesuada libero suscipit cursus. Nam eget metus. Aliquam non quam. Integer sit amet pede eu est gravida fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vulputate tempus felis. Vestibulum tincidunt elit sit amet est. Sed ultricies tempus enim. Curabitur quam augue, fringilla ac, imperdiet et, dignissim sit amet, erat. Aenean ornare. Quisque turpis neque, suscipit pretium, aliquet sed, eleifend vitae, elit. Ut velit neque, venenatis non, convallis at, nonummy tincidunt, nisl. Morbi sapien.</p>
</div>
</div>
</body>
</html>
the sourcecode above will make your DIV have a same height.
Just copy the code above and see what different.
DIV Same Height
