Empty DIV height IE7

Question

UPDATE 1:

I've found that when removing width:100% from the div, I get the results I want interms of it having 0 height if it contains no content. However, I need the div to have a width of 100%, which for some reason is forcing it to have a height without content.

Here is a jsfiddle of the problem. You will only see the problem if you go to the following link with IE7, maybe on IE6 and below.

http://jsfiddle.net/RQeeg/2/

ORIGINAL QUESTION:

I have an empty div which has a height for some reason.

On Chrome, the div does not appear at all unless it contains content. IE7 on the other hand shows the div even if it has no content.

So basically, I want it to have a height of 0px if it is empty, and automatically adjust it's height if it has content. Which is exactly how it behaves if it does not have a width of 100%.

Answer 1

Update after the revelation that you're using position: fixed :

To support IE7 here, you must use two div s. I'm reasonably sure there's no way round this (unless you'd prefer to stick with one div and use a JavaScript fix).

See:
Without content: http://jsfiddle.net/r3P8D/2/
With content: http://jsfiddle.net/r3P8D/3/

The reason that this bug happens is because once you add certain properties such as width: <not auto> or position: fixed , you trigger hasLayout on the element . As soon as you trigger hasLayout , this bug happens.

Because you require position: fixed ( ..which doesn't even work in IE6 , but I digress), there is no way to avoid hasLayout , and hence no way to avoid this bug.

So, I've given you the best workaround I can think of.

---

Old answer:

However, I need the div to have a width of 100%

Simply don't use width: 100% .

The div will then have the default width value, which is auto , so it will take "the full available width". width: auto is not the same as width: 100% , but for the purposes of this question, it looks the same visually.

Check this in Chrome and IE6/7 (without content): http://jsfiddle.net/r3P8D/
Check this in Chrome and IE6/7 (with content): http://jsfiddle.net/r3P8D/1/

From my understanding of your question, this is exactly what you're asking for.

Answer 2

This is an annoying IE bug.

I think I've got round it in the past with:

div{
    overflow:hidden;
    min-height:0;
    display: inline;   
}

Demo here: http://jsfiddle.net/tomgrohl/YfbJt/

If this has affected your layout it might be best to use a class, which gets added when you add content to the div (if your adding it dynamically):

div
{
    height:0;
    overflow:hidden;    
}

div.active
{
    height: auto;
}

Answer 3

I think IE 7 gives a default height to unless you provide a value.

Try setting the height to 0px.

Answer 4

Add this to the beginning of your CSS File:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

This applies standard rules to elements, and eliminates cross-browser inconsistencies.

---

If it still gives you an error, try adding this under the reset:

div{
width: 0px;
height: 0px;
}