Member Avatar for drjay1627

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

  • 4 Contributors
  • 4 Replies
  • 157 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by gabrielcastillo
Member Avatar for Nimrod7676

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

Member Avatar for simplypixie

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-->
Edited by simplypixie
Member Avatar for drjay1627

Thanks! It works!

commented: then why not marking it as solved? +0
Member Avatar for gabrielcastillo

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>
Edited by gabrielcastillo because: Did not use code block
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.