Stylesheets - Two column layout with strange behaviour in Internet Explorer

Author

Two column layout with strange behaviour in Internet Explorer

ckirchho@directmedia.de

2005-11-15, 7:21 pm

Halo,

I am trying to realize a two column layout basically like this:
<html>
<head>
<style>
leftCol {
float: left;
width: 15em;
}
rightCol {
margin: 0 0 0 16em;
}
</style>
</head>
<body>
<div id="head">
...some text
</div>
<div class="mainbody">
<div class="leftCol">
...some text containing a menu
</div>
<div class="rightCol">
...some longer text
</div>
</div>
<div id="footer">
...some text
</div>
</body>
</html>

The left column doesn't contain much text (only a menu) and thus is
usually shorter than the content on the right side.

Opera, Netscape and Firefox are ok in the latest versions I have.

The problem I have only appears (so far) in Internet Explorer 6. You
need a very wide table, that extends the browsers viewport to the
right, or a very long word in the right column as well, to cause the
following problem: The text from the beginning of the DIV up to the
table or the long word is rendered ok from the top of the DIV.

But the table or long word starts - left aligned with the rest of the
right DIVs content-, but below the left DIV. If I increase the window
width in a way that the table or the long word fits into the viewport,
it "snaps" up to the preceeding content.

Internet Explorer seems to think like this:
- Well, there is content that doesn't fit into the viewport
- Let's see: Oh there is a DIV floating at the left that isn't as tall
as this DIV containing the object I want to render. Below the floating
DIV there will be more space for the object, because I can use the
whole width of the viewport there.
But then, when the table or long word is supposed to be rendered there,
Internet Explorer remembers:
- Oh well, the actual DIV has a margin-left of 16 em, so I don't have
more space for my table or long word here. Well I'll render it here
anyway.

Is this some known bug or feature? Is there a workaround?

I cannot use absolute positioning, which would prevent Internet
Explorer from false rendering in that situation, because in that case
the footer wouldn't be positioned correct. He would slip directly under
the head, and - in terms of z-order - under the absolute positioned
left column and right column.

Thus I have to stick to the solution with "float: left" and "margin:
...."

Again: Any hint into the right direction of how to correct this will be
appreciated.

Regards,

Christian Kirchhoff

Another little effect: If there is a table in the right column with its
width set to 100%, the table is rendered at 100% of the viewports
width, not the DIVs width, making the table wider as the viewport's
width.

Jim Moe

2005-11-15, 7:21 pm

ckirchho@directmedia.de wrote:
> margin: 0 0 0 16em;
> }
>
Add width:100%. If that does not work, add float:right.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

ckirchho@directmedia.de

2005-11-16, 6:45 pm

Jim Moe schrieb:

> ckirchho@directmedia.de wrote:
> Add width:100%. If that does not work, add float:right.
>
> --
> jmm (hyphen) list (at) sohnen-moe (dot) com
> (Remove .AXSPAMGN for email)

Hallo Jim,

thanks for the hint. Here's what happens (in Internet Explorer) if I do
it as you suggested.

width: 100%
Now if the table doesn't fit, the complete text jumps down, even that
portion of the text preceeding the table that originally fitted. This
happens because now the whole right DIV moves down. It still has the
margin-left I gave it of course. If I increase the browser's width, the
DIV jumps up.

float: right
Same as above, but now when the div jumps up the margin-left is not
taken from the left border of the browser's window, but from the right
border of the left box, resulting in a wide gap between the left and
the right DIV.

Seems I have to look further for another solution...

Regards,

Christian

Jim Moe

2005-11-16, 6:46 pm

ckirchho@directmedia.de wrote:
> Jim Moe schrieb:
> Seems I have to look further for another solution...
>
Try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Floats</title>
<style type="text/css">
#head { background: #fed; }
#mainbody { background: #efd; border: 1px solid black; }
#leftCol { border: 1px solid red;
float: left;
width: 15em;
}
#rightCol { background: #dfe; margin: 0 0 0 16em; }
#footer { clear: both; background: #def; }
</style>
</head>

<body>
<div id="head">...head text</div>
<div id="mainbody">
<div id="leftCol">...left column text containing a menu</div>
<div id="rightCol">...right column longer text</div>
</div>
<div id="footer">...footer text</div>
</body>
</html>

The missing part was "clear:both" in the footer.
If you float:right rightCol, the code must come before leftCol.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)