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 Prevent Transition Animation To Run Page Load

    How do i rotate text in css

    How to implement small text list search functionality using CSS attribute selectors

    How to position a vertical menu as nested
      under horizontal parent

    HTML – Show menu on hover

    How to set color on mouse hover - css

    How to get image info from css into MasterPage'gridview?

    css: show all floating text (variable font size) on the baseline

    How to vertically align an image in a container that fills the page?

    How to remove the bottom 1px of an inline-block (CSS)?

    How do I keep a mouse cursor from changing to 'selected text' in JQuery?

    Hover on div(1) to show div(2), if mouseout continue to show div(2) for x seconds

    How can fixed element push content down the page using CSS only?

    How to get the kendo NumericalTextBox to share the width of a table cell the same way the kendo DropDownList does?

    How to change margin according to other elements?

    How to create 10 CSS classes, each having 10% darker gray background with LESS?

    CSS - How to change backgound colour for item avatar in ionicframework?

    How to spread three columns in CSS across a page equally

    How to reset css (a:visited{color:green}) when refresh browser address bar

    How To Put Values Dynamically

    how to position div with css and force text to wrap around

    jQuery: How to animate height change without known heights?

    How to vertically align text to the middle of a list

    How to position div at the bottom of a page

    urls being shown after links when printing web page

    how to make animated 404 gears?

    How to make contents vertical align inside div

    How to align 2 divs inside one div container with CSS (see image)

    how can I set the opacity of the background of a span, but not the text? [duplicate]

    How can I include the CSS file in CodeIgniter?