...

View Full Version : div not having height of child div.



devinmaking
01-25-2012, 11:22 AM
Hi guys please could you help with this css bud.

I have set a wrapper which has a white border, i then set a container within the wrapper which has a rgba white background and a rgba blue 10px border.

The container and the wrapper is set to a min-height of 300px so that i can see that all divs are correctly placed.

The problem is that the wrapper is not growing with the div within, i have set a screenshot also below.

Here is the html and css:

html:

<div id="wrapper">

<div id="main_container"></div>

</div>

css:


body{
margin:0;
padding:0;
top:0px;
background-image:url(../images/bg.jpg);
background-repeat: no-repeat;
background-position: center top;
background-color: #6399C8;
}

#wrapper{
width:960px;
float:none;
margin: 105px auto 0px auto;
border: 1px solid #FFF;
min-height:300px;
}

#main_container{
width:940px;
float:left;
min-height:300px;
background-color:rgba(255,255,255,.6);
border: 10px solid rgba(29,145,194,.6);
}


The screenshot is attached.

You see the 1px white border is not the same height as the inner div. I have also set the wrapper as height:auto !important; and this still did not work.

Thanks

abduraooft
01-25-2012, 11:42 AM
What you need to do is clear the floats, instead of setting min-height/height to the outer element.

Add overflow:auto; to #wrapper. Read http://www.quirksmode.org/css/clearing.html

Arbitrator
01-25-2012, 11:45 AM
The problem is that the wrapper is not growing with the div within, i have set a screenshot also below.http://complexspiral.com/publications/containing-floats/ is a good article explaining why this happens if interested.

devinmaking
01-25-2012, 12:06 PM
What you need to do is clear the floats, instead of setting min-height/height to the outer element.

Add overflow:auto; to #wrapper. Read http://www.quirksmode.org/css/clearing.html

Hi

Thanks for the reply, it solved it for a second but as soon as i input more things it then did what is on screenshot 1, what is needed is screenshot 2 but with the white border around it.

html:


<div id="wrapper">

<div id="main_container">

<div id="slide_wrap"> </div>

</div>

</div>


css:


body{
margin:0;
padding:0;
top:0px;
background-image:url(../images/bg.jpg);
background-repeat: no-repeat;
background-position: center top;
background-color: #6399C8;
}

#wrapper{
width:960px;
float:none;
margin: 105px auto 0px auto;
border: 1px solid #FFF;
overflow: auto;
}

#main_container{
width:940px;
float:left;
background-color:rgba(255,255,255,.6);
border: 10px solid rgba(29,145,194,.6);
}

#slide_wrap{
position: relative;
width:960px;
float:left;
height:360px;
padding:20px;
border: 1px solid #cacaca;
background-color: #000;
background-image: url(../images/slider-bg.png);
background-repeat: repeat-x;
background-position: left top;
margin: 20px 0px 0px -30px;
}


If this was css3 i would easily just add a box shadow around the container and not use the wrapper, but as client wants this to be 100% from ie7+ i cant use this method so i am unfortunately nesting divs and spans on this design :(



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum