CODEWITHSUNDEEP
htmlcss
Janinho67
Janinho67

Reputation: 145

<div> wrapper dynamic height

I have a wrapper that contains all the elements of an html page.

#wrapper {
     width: 1000px;
     height: auto;
     min-height: 100%;
     margin: auto;
     background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4488ff), to(#4422ff));
[...]
     background-attachment: fixed;
     -moz-border-radius:20px;
     -webkit-border-radius:20px;
     border-radius:20px;
}

Here's the HTML code sample

 <div id="wrapper">
        <div id="uppermenu">
             <div id="container">
                  <div id="logo"> <img src="images/logo.png" height="100%"> </div>
                  <div id="banner"> <br></div>
             </div>
        </div>
        <div class="sidemenu"> [...] </div>
        <div id="guide"> [...] </div>
 </div>

I want this wrapper to change its height depending on the content it has to contain, but as I do this is not happening. If I try to use

overflow: hidden;

the wrapper is shifted down by the uppermenu div (which it should be containing) and using

clear: both;

at the end of the contents doesn't change anything. I've tried at least 5 different question answered correctly here but none worked well for me. Last thing: the wrapper set as I wrote (with min-height at 100%) fits perfectly the screen of my browser, but that clearly not what I want it to look! Any help???

EDIT: here's the CSS of sidemenu class

.sidemenu {
      float: left;
      margin-left: 20px;
      margin-top: 20px;
      height: 200px;
      width: 150px;
      background-color: #4488ff;
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      border-radius:10px;
      z-index: 3;
}

and of the guide id

#guide {
   float: left;
   margin-top: 20px;
   margin-left: 50px;
   height: 100%;
   width: 760px;
   background-color: #4488ff;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   z-index: 3;
}

uppermenu and container

#uppermenu {
       position: fixed;
       top: 0px;
       width: 1000px;
       height: 100px;
       margin: auto;
       background: #004465;
       z-index: 5;
}
#container {
     width: 1000px;
     min-height: 100%;
     margin: auto;
}

Upvotes: 0

Views: 2679

Answers (2)

lededje
lededje

Reputation: 1869

Solution one: clear: both

Adding a block element with the style clear:both; onto it will clear the floats past that point and stop the parent of that element from collapsing. http://jsfiddle.net/TVD2X/1/

Pros: Allows you to clear an element and elements you add below will not be effected by the floated elements above and valid css.

Cons: Requires the another tag to clear the floats, bloating markup.

Note: To fall back to IE6 and for it to work on abstinent parents (i.e. the input element) you are not able to use :after.

Solution two: display: table

Adding display:table; to the parent to make it shrug off the floats and display with the correct height. http://jsfiddle.net/h9GAZ/1/

Pros: No extra markup and is a lot neater. Works in IE6+

Cons: Requires invalid css to make sure everything plays nice in IE6 and 7.

Note: The IE6 and 7 width auto is used to prevent the width being 100%+padding, which is not the case in newer browsers.

A note on the other "solutions"

These fixes work back to the lowest supported browser, over 1% usage globally (IE6), which means using :after does not cut it.

Overflow hidden does show the content but does not prevent the element from collapsing and so does not answer the question. Using an inline block can have buggy results, children having strange margins and so on, table is much better.

Setting the height does "prevent" the collapse but it is not a proper fix.

Invalid css

Invalid css never hurt anyone, in fact, it is now the norm. Using browser prefixes is just as invalid as using browser specific hacks and doesn't impact the end user what so ever.

In conclusion

I use both of the above solutions to make elements react correctly and play nicely with each other, I implore you to do the same.

Upvotes: 2

Hat
Hat

Reputation: 1731

get rid of min-height: 100%. this means that the minimum height of the div is 100% of your browser height. eliminating this should make it fit to the content

Upvotes: 0

Related Questions