1

I have an issue with my floated child divs not growing with my parent div. Is there a way to fix this? I need the wrapper to be 100% of the content in either div. Here is the html;

<body>

    <div id="wrapper">

        <div id="leftpane">

            <div id="lefthead">

                <div id="leftheadfiller">

                </div>

                <div id="leftheadlogo">

                </div>

                <div id="leftheaddivider">

                </div>

            </div>

            <div id="leftcontent">

            </div>

        </div>

        <div id="rightpane">


            <div id="righthead">

                <div id="rightheadfiller">

                </div>

                <div id="rightheadlogo">

                </div>

                <div id="rightheaddivider">

                </div>

            </div>


            <div id="navigation">

                Properties Careers About Blog Advertise Contact

            </div>


            <div id="rightcontent">

            </div>


        </div>


        <div id="close">

        </div>

    </div>


</body>

And here is the css;

html,body {
background-image:url('images/background.gif');
background-repeat: repeat-y;
background-position: center;
background-attachment: fixed;
height: 100%;
width: 100%;
margin: 0px;
}

#wrapper {
background-color: aqua;
height: 100%;
width: 866px;
margin-left: auto;
margin-right: auto;
}

#leftpane {
background-image: url('images/darkbackground.gif');
width: 326px;
height: 100%;
float: left;
}

#lefthead {
height: 132px;
width: 100%;
}

#leftheadfiller {
height: 75px;
width: 100%;
}

#leftheadlogo {
background-image: url('images/index_07.gif');
width: 71px;
height: 56px;
float: right;
}

#leftheaddivider {
height: 1px;
width: 100%;
background-image: url('images/lightbackground.gif');
float: right;
}

#lefttcontent {
height: 100%;
background-color: fuchsia;
}

#rightpane {
background-image: url('images/lightbackground.gif');
width: 540px;
height: 100%;
float: right;
}

#righthead {
height: 132px;
width: 100%;
}

#rightheadfiller {
height: 75px;
width: 100%;
}

#rightheadlogo {
background-image:url('images/index_09.gif');
width: 109px;
height: 56px;
float: right;
}

#rightheaddivider {
height: 1px;
width: 100%;
background-image: url('images/darkbackground.gif');
float: right;
}

#navigation {
margin-top: 2px;
font-family: Arial, Helvetica, sans-serif;
color: #A3A3A3;
font-size: 14px;
word-spacing: 44px;
text-align: center;
width: 100%;
height: 18px;
}

#rightcontent {
padding-left: 6px;
background-color: fuchsia;
}

#close {
clear: both;
}

Is there a way to fix this? I have this set up on a temporary folder on my local server at:

http://68.113.27.229/test

The two divs that I need to force the wrapper to grow are Leftcontent and Rightcontent.

Thanks!

Brett
  • 23
  • 1
  • 5

1 Answers1

3

Add overflow: hidden to the parent div element.

If you don't want the overflowing content to be hidden, then try this:

Insert this as the last div inside the wrapper div.

<div style="clear: both"></div>
Chris Hagan
  • 2,437
  • 3
  • 17
  • 16
Susam Pal
  • 32,765
  • 12
  • 81
  • 103
  • Susam! You helped me last night, how swell of you to stop by again. If I add the hidden attribute the page loses its scroll bar. I assume you are saying add it to the Wrapper? – Brett Jul 28 '11 at 10:03
  • That's because you have set a height in the wrapper. Do really need a height there? The div would grow automatically as you fill content. I looked at your CSS and HTML and it is very hard to understand your question because the wrapper occupies 100% width and the aqua color covers the entire page. So, I am not sure what you mean when you say that it is not growing. Please provide a stripped down example that demonstrates only the issue and nothing else. – Susam Pal Jul 28 '11 at 10:06
  • Will do, but there is a reason for the height on the wrapper. I need the left div to fill the page to 100% regardless if there is content in it or not. Without the wrapper having a set height of 100%, the left content wont grow. – Brett Jul 28 '11 at 10:15
  • Here is a picture to further illustrate my issue. The cyan color on the left is the left pane tag which is within the wrapper, but ISNT growing due to the wrapper not having a set height; http://i.imgur.com/9XApb.jpg – Brett Jul 28 '11 at 10:21
  • If you need the height, then use the other solution I have given. Doesn't `
    ` work for you?     – Susam Pal Jul 28 '11 at 10:24
  • It does now that I removed the height as per you said.. THank you! – Brett Jul 28 '11 at 10:27