CODEWITHSUNDEEP
htmlcss
this.Tony
this.Tony

Reputation: 241

how can I make div have auto height according to content

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>

Upvotes: 1

Views: 112

Answers (3)

Asanka Rox
Asanka Rox

Reputation: 114

  1. Remove min-height from #contentwrap and add display: inline-block; for #contentwrapper

    #contentwrapper {
    margin-left: 131px;
    margin-right: 131px;
}    
#contentwrap {
    margin: 0 auto;
    position: relative;
    width: 1150px;
    display: inline-block;
}    
#content {
    margin: 0 auto;
    margin-bottom: 70px;
    position: relative;
}

Check this out

Upvotes: 1

Bindiya Patoliya
Bindiya Patoliya

Reputation: 2764

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>

Upvotes: 3

robert
robert

Reputation: 869

You simply use javascript to get the view height and set that height to your element. By simply using CSS that can't be done.

Upvotes: 0

Related Questions