CODEWITHSUNDEEP
htmlcssheight
LarsVegas
LarsVegas

Reputation: 6812

div doesn't fully expand to content

I'm not a css expert but I'm running out of ideas what could trigger this unwanted behaviour. I'm want to use a div as background for the main section of my site. Once there is a lot of content in my div content the div content_wrapper doesn't fully expand. This a section of my HTML

<div class="content_wrapper">
    <div class="content">
        <h1>Some heading</h1>
        <p>lot's of text</p>
    </div>
<footer>
    <div id="foot">
        <a id="disclaimer" href="disclaimer.html"> disclaimer</a> 
    </div>
    </footer>
</div>

And the .css. 

.content_wrapper{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 215px;
    background-color: #EEE;

}
.content{
    z-index: 5;
    float:left;
    margin: 50px 0 50px 20px;
    width: 75%;
    padding: 20px;
    background-color: #FFF;
    border-left: dashed 1px #CCC;
    border-top: dashed 1px #CCC;

    -webkit-border-top-left-radius: 25px;
    -moz-border-radius-topleft: 25px;
    border-top-left-radius: 25px;
}

Any ideas what is going on and why?

Upvotes: 1

Views: 1863

Answers (4)

a better oliver
a better oliver

Reputation: 26828

The problem here is the combination of position: absoluteand width/height: 100%.

The 100% refer to the element's parent, which is body. So content_wrapper would be as large as the body. But it is also positioned absolutely and therefore taken out of the flow. Which means that the size of bodydoes not change with the size of the content. Which in turn means that content_wrapper does not grow either and the content is only visible because of the overflow.

Don't use width and height and you should be fine.

Upvotes: 1

daamsie
daamsie

Reputation: 1598

Try setting the content-wrapper to position:relative instead of absolute. And get rid of the float on your .content .

Either that, or put a clearing div beneath it. 

.content_wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    top: 215px;
    background-color: #EEE;
}

.content {
    z-index: 5;
    margin: 50px 0 50px 20px;
    width: 75%;
    padding: 20px;
    background-color: #FFF;
    border-left: dashed 1px #CCC;
    border-top: dashed 1px #CCC;
    -webkit-border-top-left-radius: 25px;
    -moz-border-radius-topleft: 25px;
    border-top-left-radius: 25px;
}

Upvotes: 1

dragonloverlord
dragonloverlord

Reputation: 442

Try this

.content_wrapper{
width: 100%;
height: 100%;
margin-top: 215px;
background-color: #EEE;
z-index:-999;
position:absolute;
}

the z-index should layer it at the bottom.
please tell me if that is not what you're looking for or it does not work

Upvotes: -1

Ivo Pereira
Ivo Pereira

Reputation: 3500

Change your .content_wrapper to this code:

.content_wrapper{
    width: 100%;
    height: 100%;
    margin-top: 215px;
    background-color: #EEE;
}

You shouldn't be using position:absolute to allow it to expand to its parent. And, as of leaving the use of position:absolute, you should use margin-top then, instead of top.

Upvotes: 1

Related Questions