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.
