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..

    CSS: How to force floating blocks to have equal (100%?) height

    How to Achieve Word Wrap Effect With Children Divs

    CSS how to apply :first-child and :last-child

    How do I access font features in CSS?

    How to horizontally center align this absolutely positioned `` tag inside the relatively positioned div?

    How to add another text decoration definition with Javascript?

    how to vertically center align div elements with contents other than text

    How to set a External SVG color in HTML using CSS?

    How to hide currently selected li item from being an option when user clicks dropdown again?

    How to style the ScrollBar using CSS or Javascript? [duplicate]

    How to “add details” to CSS (example Box shadow)

    How do I center content and extend the background color to 100% of the page?

    How to extend the border-top on my nav_bar class

    How to specify BOTH max-width % and px [closed]

    How to add border inner side of image using CSS

    CSS - How to center an image without class or id?

    Hover over image making it transparent and showing text

    How to animate the filling of a html element

    How do I hide images that have a certain class when creating a pdf from html?

    How do you read !important in CSS?

    How to detect CSS is turned off with PHP?

    How to Style this table-like structure

    How to set CSS width so that the element will have the exact window width?

    How to preserve aspect ratio when scaling image using one (CSS) dimension in IE6?

    Bootstrap - how to make the image being scaled down to fit the window height?

    How do I join my list and div using css?

    How can I refactor some repetitive HTML and CSS?

    How to add border for html tr

    How to Include CSS and JS files via HTTPS when needed?

    HTML5 CSS (How to on hover image ignore transparent)