Reputation: 20468

what is the issue between float and height:100% of divs

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

Upvotes: 2

Answers (4)

Goran

Reputation: 393

Try to put another div with clear:both at the end of the "Contents" div:

<div id="MainDiv">
    <div id="Contents">
        <div id="RContents">
            Right Contents
        </div>
        <div id="LContents">
            Left Contents
            ...                
        </div>
        <div style="clear:both">
    </div>
</div>

Upvotes: 1