Please see the HTML below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
html, body
{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
border: 1px solid red;
}
#MainDiv
{
width: 100%;
min-height: 200px;
height: auto;
border: 1px solid blue;
}
#Contents
{
width: 500px;
margin: 0 auto;
min-height: 100px;
height: auto;
border: 1px solid green;
}
#RContents
{
float: right;
width: 200px;
min-height: 50px;
height: auto;
border: 1px solid pink;
}
#LContents
{
float: right;
width: 200px;
min-height: 50px;
height: auto;
border: 1px solid yellow;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="MainDiv">
<div id="Contents">
<div id="RContents">
Right Contents
</div>
<div id="LContents">
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
</div>
</div>
</div>
</form>
</body>
</html>
And this JSFiddle link:
jsfiddle
What is the problem between float and height:100% in my example?
How can I force body , MainDiv and Contents divs To Grow With LContents div?
min-height s are so important
Thanks in advance
Like this:
http://jsfiddle.net/9TLFM/
I’ve cleared the floats using clear:both
and removed width and height from body