CODEWITHSUNDEEP
css
otolock
otolock

Reputation: 710

How can I make a CSS Wrapper adjust height automatically?

I've been looking around for a while today and can't find a question that answers my specific problem.

I am designing my website and the content is in the center placed inside a div, which is the wrapper. My problem is that even though the height is set at 100%, if I add to much content, the wrapper does no stretch with the content, so the text ends up being placed outside the wrapper; it is still centered with it.

How can I fix this? The CSS I have is:

#wrapper {
position: absolute;
left: 50%;
width: 800px;
height: 100%;
min-height: 100%;
margin-bottom: 0px;
margin-left: -400px;
background-color: #F7F7F7;
border-radius: 5px;
}

Upvotes: 1

Views: 3598

Answers (2)

Mzeey1400
Mzeey1400

Reputation: 1

You could also take off the Height Property, if you need to have a minimum height of 100% before the wrapper div begins to enlarge as respective to its content. so it will be:

#wrapper{
    min-height: 100%
}

not:

#wrapper{
    height:100%; 
    min-height: 100%;
}

Upvotes: 0

codingrose
codingrose

Reputation: 15699

Change

#wrapper{height:100%;}

to

#wrapper{height:auto;}

Fiddle here.

Upvotes: 1

Related Questions