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

Recommended Answers

All 4 Replies

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.