Site template using float - html

Question

I found site template.
body {
font: 10pt Arial, Helvetica, sans-serif;
background: #54463d;
margin: 0;
}
h2 {
font-size: 1.1em;
color: #752641;
margin-bottom: 0;
}
#container {
width: 500px;
margin: 0 auto;
background: #f0f0f0;
}
#header {
background: #8fa09b;
font-size: 24pt;
font-weight: bold;
color: #edeed5;
padding: 5px;
}
#content {
float: left;
width: 329px;
padding: 10px;
border-right: 1px dashed #183533;
background: #fff;
}
#content p {
margin-top: 0.3em
}
#sidebar {
float: left;
width: 120px;
padding: 10px;
}
#footer {
background: #8fa09b;
color: #fff;
padding: 5px;
}
.clear {
clear: both;
}
It works ok if content height more than menu height:
http://jsfiddle.net/R6MYH/1/
But, in another case, the site is not displayed correctly:
http://jsfiddle.net/a5SFM/

Answer 1

Make slight change in your design as mentioned below :
Put divs with id content and sidebar inside one div with float:left
Remove float:left from css #content and #sidebar
Add display:table-cell in css #content and #sidebar
Live Demo This will work in all cases.
Your inner html will look like :
<div style="float:left">
<div id="content">
<h2>Title</h2>
<p>There is only one sentence.</p>
</div>
<div id="sidebar">
<p>Lorem ipsum</p>
<p>Dolor sit amet</p>
<p>There is at text. Not really!</p>
<p>Link 4</p>
</div>
</div>
Advantages:
The main advantage of using display:table-cell is you don't have to set min-height. It will work even your side bar contains height of 1px.
More user friendly
Compatible in all the browsers (ie > 7)
You don't have to do any extra work like javascript/jquery.

Answer 2

create a div inside #container and put #content and #sidebar inside it.
and then replace float: left in css of both #content and #sidebar with display: table-cell
like this: http://jsfiddle.net/aneelkkhatri/a5SFM/6/
no use of min-height

Answer 3

A more general solution, would be to implement this using JavaScript (jquery)
Add this script to your document
$(document).ready(function () {
$("#content").height($(window).height() - $("#header").height() - $("#footer").height() - 40);
});
This will make the content height as same as the browser's window height in all cases
Don't forget to add this to inside your tag
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Check it out here: http://jsfiddle.net/basharmadi/Mqy7y/

Answer 4

Try adding this to #content:
min-height:300px;
This will "extend" down the content div no matter what.

Answer 5

Try to put a min-height to your content div:
min-height: 200px;
Here:
#content {
float: left;
width: 329px;
padding: 10px;
border-right: 1px dashed #183533;
background: #fff;
min-height: 200px;
}
jsfiddle