How can I make a CSS Wrapper adjust height automatically?


Tags: css

Problem :

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;
}


Solution :

Change

#wrapper{height:100%;}

to

#wrapper{height:auto;}

Fiddle here.


    CSS Howto..

    How to include css from resources folder in symfony 2

    My Background image doesn't show up and is not inspected in the browser [closed]

    How to make a transition effect that just perform like css transition?

    How to make the height REALLY 100%

    How do I position the search box to my specs?

    How to modify this CSS based Accordion to work with multiple accordions on the same page?

    Font Styling Issue ~ how to make font smooth/Strong in html css

    How to vertically align a DIV next to an image?

    How can I format all td elements contained in a table with class myclass in CSS?

    How can I make an element fit to fill the right part of the window?

    How to apply multiple CSS selectors to a paticular div?

    How to move “+” to right i n css?

    How to let the browser cache css and js files for a https site?

    How can I get this toggled drop down menu to be open by default - rather than having to have someone click it to initialize it?

    CSS: how to position buttons in groups across a row on a web page

    How to ensure dynamic CSS is loaded first before AJAX content?

    How to resize a div on drag? [Issue with rotation]

    CSS: How to have only 100% with fluid layout and border?

    How to create equal height columns in pure CSS [duplicate]

    how do you link css to a jade file?

    How to get css to work in Django [closed]

    How to make navigation follow when scrolled down? [duplicate]

    How to add custom layout and css in a CakePHP application?

    How do I get a td background color to stretch from left to right, not just the table width, in html & css?

    How to scale a .svg being the background in a div?

    How to make a css 'snail'?

    How to get element by its partial class name CSS

    How to Prefix this Input element, using CSS

    How to keep the top div height fixed and bottom div height in %age

    How to put multiple Bootstrap inputs on same line?