Difference between revisions of "CSS Display Bugs in IE"
LeonTorres (talk | contribs) (→Float Drop Bug) |
LeonTorres (talk | contribs) (→Float Drop Bug) |
||
| Line 16: | Line 16: | ||
</pre> | </pre> | ||
| − | In IE, the contents in the "body" might end up below the sidebar rather than to the right of it. To fix this, make sure the content is less than the width of the body area, which is 800 - 200 = 600 pixels wide. | + | In IE, the contents in the "body" might end up below the sidebar rather than to the right of it. To fix this, make sure the content is less than the width of the body area, which is 800 - 200 = 600 pixels wide. Then, add <tt>display: inline;</tt> to the CSS <tt>.body</tt> definition. |
Revision as of 19:42, 4 January 2008
Float Drop Bug
This bug occurs when you have a floating box and the content that should be next to it is pushed underneath. It is a well known bug and has many solutions. The best solution is to avoid using CSS and use tables for this kind of layout if you must target IE 6. Sometimes this is not possible, thus the fix must be accomplished by hacking at the CSS until it does what you need.
As an example, suppose you have a fixed width main content area, say 800 pixels wide. On the left is a floating sidebar that has float: left and is 200 pixels wide. We want the main body of content to fill the rest of the space.
<div class="main-content-area">
<div class="sidebar">
Sidebar content goes here.
</div>
<div class="body">
Rest of content should flow around the sidebar
</div>
</div>
In IE, the contents in the "body" might end up below the sidebar rather than to the right of it. To fix this, make sure the content is less than the width of the body area, which is 800 - 200 = 600 pixels wide. Then, add display: inline; to the CSS .body definition.
