1. Home
2. Developer Center
3. Dreamweaver Developer Center
4. CSS Advisor

CSS Advisor

Expanding Box Problem

Problem

Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content. (The content should overflow instead.)

Solution

Use word-wrap: break-word inside IE-conditional comments (works on text only) or overflow: hidden (works on all content, but may cause content to be clipped).

Detailed description

This is one of the more problematic bugs in Internet Explorer 6 and earlier (Windows)  because it causes other bugs, such as Float Drop. A frequent cause of the box expansion problem is long, unbroken strings like raw URLs: the text has no natural break to wrap the line, so it extends beyond the defined width of the box--and pushes the box out in the process. Images that are too wide for their containers can also cause those containers to expand.

Solutions

The first and easiest solution is to specify a width for your container that is wide enough to accommodate all of your content. When this isn't possible, two other options are available:

• For long text, such as URLs, you can force a break in IE by specifying word-wrap: break-word; on the container. Note that word-wrap is a proprietary Microsoft property that is not part of any CSS spec; you should enclose this property in IE conditional comments if you want your CSS to validate.
• For all other content, you can prevent expansion by applying overflow: hidden to the container. This will cause any content that would otherwise cause the container to expand to be clipped instead.
  

NOTE: Boxes with no specific width also expand; in this case, the overflow: hidden workaround does not apply. If the expansion is desirable, the same effect can be achieved in standards-compliant browsers by applying display: table-cell to the container.

Bug originally documented on positioniseverything.net by Artcoder. (Read original article)

Text ID: EXPANDING_BOX_PROBLEM

---