Question

I’m trying to create two floating divs inside of another:

 <div style="width:100%;height:500px;position:relative;top:15px;">          

        <div style="position:relative;float:left;width:58%;height:100%;left:10px;">
            <div id="borderdiv" style="position:relative;width:92%;top:20px;bottom:20px;left:20px;border:1px solid #000;background-color:gray;">
                <div style="height:30px;text-align:center;position:relative;    "><h2>welcome</h2></div>                
                <div style="position:relative;width:25%;background-color:green;float:left;">floating div1</div>
                <div style="position:relative;width:25%;background-color:red;float:left;">floating div2</div>               
            </div>
        </div>


   </div>

The problem is the floating div1 and div2 are outside the border of the div with id “borderdiv”. What am I doing incorrectly?

Answer 1

Floated elements have no height, so #borderdiv does not expand to contain them.

You can use a clearing element to correct this:

<div style="position:relative;width:25%;background-color:red;float:left;">floating div2</div>
<div style="clear: both" />

Demo on JSFiddle.net