how can I make div have auto height according to content


Tags: html,css

Problem :

I can't seem to find the answer I want on SO. I wanted to know how can I auto height a div without using float and maintaining margin auto so the div can be centered.

My problem is that #contentwrap is not doing auto height according to how tall #content is.

With #content having a auto height according to content I want #contentwrap to also have auto height according to #content height.

Here is a fiddle.

CSS:

#contentwrapper {
    margin-left: 131px;
    margin-right: 131px;
}
#contentwrap {
    margin: 0 auto;
    min-height: 700px;
    position: relative;
    width: 1150px;
}
#content {
    margin: 0 auto;
    margin-bottom: 70px;
    position: relative;
}

HTML:

<div id="contentwrapper">
    <div id="contentwrap">
        <div id="content">
        </div>
    </div>
</div>


Solution :

Simply try to remove this:

  1. Remove min-height from #contentwrap
  2. Remove margin-bottom: 70px; from #content

Try this :

<div id="contentwrapper">
<div id="contentwrap">
    <div id="content">
    Vice twee irony pickled sriracha mumblecore, VHS beard +1. Shoreditch post-ironic retro, actually plaid roof party irony kogi lo-fi organic. <br />Vice twee irony pickled sriracha mumblecore, VHS beard +1. Shoreditch post-ironic retro, actually plaid roof party irony kogi lo-fi organic.
    </div>
</div>

<style>
#contentwrapper {
    margin-left: 131px;
    margin-right: 131px;
}
#contentwrap {
    margin: 0 auto;
    position: relative;
    width: 1150px;
    border:1px solid #000;
}
#content {
    margin: 0 auto;
    position: relative;
    border:1px solid red;
}
</style>

    CSS Howto..

    the tab's content shows abnormal under IE7

    How to use this jQuery to effect css opacity

    How to change text transparency in html/css?

    How To Style background-image CSS

    How to keep transparent radial background smooth in browsers other than Chrome?

    How to get 60 fps in css element width animation?

    How to make an item to appear for a short time (Either Javascript or CSS) [closed]

    CSS: How to shrink first div in container instead of going outside of container

    How to improve this code to combine/compress CSS using PHP [closed]

    How to change CSS for a specific page in wordpress?

    How to make this Header/Content/Footer/Menu layout using CSS?

    How to display a 100% width stripe in a CSS design using a fixed-grid blueprint?

    CSS Firefox - How to deactivate the dotted border ( firefox click indicator )?

    How to make a graphic image responsive in css

    How to create a pricetag shape in CSS and HTML

    How do I push inline elements onto the next line

    BackboneJS + HandlebarsJS - how to add image based on css

    Can someone show me how to get my CSS code to work more than once? [closed]

    how to pass context value to css

    How to expire cached pages when only the CSS url changes

    how to deselect the active span element?

    How to align CSS Input type Text Placeholder Image

    How Do I Reduce the Padding Around a Chart Within an Article

    How to make this slider control to work in both directions?

    how to dynamically move list items inside a DIV to get proper arrangement?

    how to change the css in td on mouse click using javascript

    How to style a link which wrote with echo? [closed]

    How to remove pseudo-element styles from the first element?

    How to make CSS for HTML5
    work properly in IE?

    How apply CSS to browse button