Home/ Questions/Q 6054941
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T08:12:32+00:00

UPDATE 1: I’ve found that when removing width:100% from the div, I get the

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    To support IE7 here, you must use two divs. 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.

    • 0