473,246 Members | 1,976 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,246 software developers and data experts.

Two column layout with strange behaviour in Internet Explorer

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.

Nov 23 '05 #1
3 3037
ck******@directmedia.de wrote:
rightCol {

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)
Nov 23 '05 #2

Jim Moe schrieb:
ck******@directmedia.de wrote:
rightCol {

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)


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

Nov 23 '05 #3
ck******@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)
Nov 23 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

82
by: Peter Diedrich | last post by:
The site design is pretty simple: ============================================ | Head | ============================================ | | ...
39
by: Zak McGregor | last post by:
Hi all Are there any good solutions to aligning form field names and input boxes without resorting to tables? I am struggling to do this nicely at the moment. Thanks Ciao Zak
3
by: Doug McCrae | last post by:
http://www.btinternet.com/~doug.mccrae/go4learning/index.html As it says in the subject, a two column layout (plus header and footer boxes). I feel the left column really needs to be fixed width...
5
by: Roderik | last post by:
Hi, I made a three column lay-out for a website, when viewing it in mozilla it is okay, the content in the right column starts at the top. When viewing the page in internet explorer the contents...
2
by: Roderik | last post by:
hi, I've got a 3 column layout which I want to use. But when testing it appears that the 3rd columnn text starts a little lower then the text in the other columns. This is the case in internet...
10
by: Günther Steinmetz | last post by:
I am trying to build a page with a header, 2 columns in the middle and a footer. The left column contains the menu, the right column the real content. Instead of giving the content column a left...
4
by: rfox | last post by:
I have a two-column layout where I want the left column to have a colored background while the right column (main content div) has a white background. Please see...
11
by: ft310 | last post by:
Use Internet Explorer go to http://rhodeisland-aa.org/tester/meetings/index.htm On the left click "and go to meetings" Click any address in the right hand 'location' column. The entire page...
2
by: scdowney | last post by:
First and foremost, thank you in advance for any attempts to help me out. I am working on a project with work, and it requires I use CSS selectors to locate elements within a webpage. For the...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: marcoviolo | last post by:
Dear all, I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.