Hello,

I need some help with understanding floats. I have a div named holder, which as the name suggest, is a holder. Inside this holder I have 2 containers. One is the left container and the other is the right container.

HTML

<div id="holder">
    <div id="contentleft">
        <p>This is a paragraph. This is a paragraph. This is a paragraph.</p> 
    </div><!--end of contenttop-->
    <div id="contentright">
        Picture go here! Picture go here!Picture go here!Picture go here!
    </div><!--end of contentright-->
</div><!--end of holder-->

CSS

#holder{
    width:65%;
    margin: 10px auto;
    background-color: green;
    position: relative;
    padding: 10px;
}

#contentleft{
    background-color: red;
    width: 50%;
    float: left;        
}

#contentright{
    background-color: blue;
    margin-left: 50%;   
}

Here is the problem: the holder, doesn't increase in size when the size of the contentleft increase (It does when contentright increase). The contentleft essentially overflows. How do I fix it? As always any help is greatly appreciated!

Thanks,

Drjay

Try to set width values as absolute value and not relative values.

The holder won't increase when the content of a floated div inside it increases in content as floating a div takes it out of the containing div. What you need to do is create a class to clear the floats and place this after your floated elements inside the holder div.

In your css, add:

.clear { clear:both; }

For the HTML:

<div id="holder">
    <div id="contentleft">
        <p>This is a paragraph. This is a paragraph. This is a paragraph.</p> 
    </div><!--end of contenttop-->
    <div id="contentright">
        Picture go here! Picture go here!Picture go here!Picture go here!
    </div><!--end of contentright-->
    <div class="clear"></div>
</div><!--end of holder-->

Thanks! It works!

commented: then why not marking it as solved? +0

clear:both can be used instead of clear class. This would keep you from having to plase extra div inside the markup

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Canada-Accessible</title>

<link href="css/main.css" rel="stylesheet" type="text/css">
<style type="text/css">
@charset "UTF-8";
/* CSS Document */

#holder{
    background:green; padding:10px; 
    margin:0 auto; /*margin top/bottom 0 and left/right auto will center the main div on the page if width is set*/
    width:800px; /* set the width to what ever site you want you main div to be  */
    overflow:hidden;} /* Overflow set to hidden with drop main div down */

#contentleft{
    background-color: red;
    float:left; /*float left width set to whate ever you like*/
    width:380px;
    margin-right:20px;
}

#contentright{
    background-color: blue;
    float:left; /*float left width set to whate ever you like*/
    width:380px;
    margin-left:20px;
}



/*

    Important note is the calculate the div widths and margins to make sure you have equal sizes, you dont want a left div to be 65% and your right div to be 50%
    Also if you add margin or padding you will have to subtract from the div width to make up for the adding padding/margin.


*/



</style>


</head>

<body>

<div id="holder">
    <div id="contentleft">
        <p>This is a paragraph. This is a paragraph. This is a paragraph.</p> 
    </div><!--end of contenttop-->
    <div id="contentright">
        Picture go here! Picture go here!Picture go here!Picture go here!
    </div><!--end of contentright-->
</div><!--end of holder-->


</body>
</html>