Baffling 3-columns underflow problem

[grandmainger]

Dear all,

After reading posts here and fishing around on the web, I created a 3-columns+header+footer design using the following model:
http://realworldstyle.com/nn4_3col_header.html

<Eeek!>

It displays perfectly well in IE5 on the mac, and in Opera on the PC, BUT NOT IN IE6 on the PC!

<Ooops!>

Any clues as to why my central/content column overflows under my rightcol would be very much appreciated!

Thanks

GM

[edited by: Nick_W at 7:51 am (utc) on Sep. 25, 2003]
[edit reason] no personal urls please / thanks! [/edit]

[Gandalf]

I have just looked at it in IE6 on a pc and it looks fine.

[grandmainger]

OK here goes:

I want a design with 3-columns, header and footer.
I used a modified version of this model:
[realworldstyle.com...]

This model works fine in all the browsers I tested.
NOW, my code (see below) works fine on Mac IE5 and PC Opera, but does not work on IE6 PC (80% of my traffic)

The content column overflows to the right, under the right hand column.

I'm getting crazy here!

This is my HTML:

<div id="content" style="position:absolute; top:125px; z-index:3">
This is a very long sentence so that you can see how much it overflows to the right hand side of the screen and I don't understand why grrrrrrrrrr.
</div>
<div id="rightcol" style="position:absolute; z-index:4">
This is the text for the right hand side
</div>
<div id="header" z-index:1">
this is the header content blah blah blah
</div>
<div id="leftcol" style="position:absolute; left:0px; top:117px; width:139px; height:347px; z-index:2">
This is the text for the left column
</div>

This is my CSS:

#header {
color: #000;
border-bottom: 1px solid #333;
height: 117px;
}

#leftcol {
float: left;
width: 130px;
margin-left: 0px;
margin-top: 0px;
color: #000;
padding: 0px;
}

#rightcol {
position: absolute;
left: 80%;
width: 148px;
z-index: 3;
color: #000;
padding: 0px;
top: 117px;
background-color: #006633;
}

#content {
margin: 0px 20% 0 155px;
padding: 3px;
color: #000;
position: absolute;
background-color: #66CCFF;
}

Any clue will be very greatly appreciated!

Cheers

GM

[SuzyUK]

Hi grandmainger - Welcome to WW

Your "overflow" is there because it's taking the left margin (but that shouldn't be necessary anyway you should use the left: 155px; to position it correctly) and the div is remaining @ 100% wide.

You could use padding to clear the right column.. however this will cause problems as you are using a percentage width to set your right columns position. why not use right: 0px instead for the right column (or whatever px measurement suits) but then the color will still stretch all the way down, which may or may not be a problem depending on your design.

Another way might be to NOT position the content absolutely, just let it use the default (static) position and then use margins to clear the top, right and left sections instead..

Suzy

[davemarks]

Can anyone help please, I'm pulling my hair out

I'm trying to fix a css problem...

I have a 2 column layout, left menu, right content, with a header above and then all within a box that is centered.

The problem I'm having is that within the main content box, the text is being shunted to the right slightly where the first menu column is.

If i remove the links (which have their own fancy table css) the problem goes away.

I found this link through one of the other topics in this forum - http://realworldstyle.com/nn4_3col_header.html - you can see a similar problem here - the content is shunted by the first column

The two columns:

#pagemenu {
padding: 0px 0px 0px 0px;
width: 150px;
float: left;
border:1px #FFFFFF solid;
margin-left: -1px;
margin-top: 10px;
}
#pagecontent {
border:1px #FFFFFF solid;
padding: 0px 10px 10px 0px;
margin-left: 175px;
}

And the Links in the menu:

#pagemenu a {
display: block;
text-align: center;
font: 12px, verdana, arial, helvetica, sans-serif;
padding: 2.5px 5px;
margin: 0 0 1px;
border-width: 0;
text-decoration: none;
color: #CCC;
background: #333;
border-right: 5px solid #505050;
border-left: 5px solid #505050;
}
#pagemenu a:hover {
color: #333;
background: #CCC;
}

I don't want to post to much code in fear of making this post hugh, let me know if you need anything else, or if i can send you a link

Thanks

[edited by: Nick_W at 3:53 pm (utc) on Sep. 29, 2003]
[edit reason] de-linked [/edit]

[davemarks]

By the way, my post got moves to this forum by an moderator - somehow i missed this thread.

I tried the things suggested, but couldn't solve the problem still

Any help would be much appreciated

Thanks

[SuzyUK]

is the "shunt" about 3px?

if so it could be the IE 3px text jog [positioniseverything.net] bug..

Sorry about the late reply.. almost missed post

Suzy

[davemarks]

Hi SusyUK

Thanks for your reply.

I guess I'm stuck with this then, either that or i have to move the menu to the right or apply a height to the div on each page that matches the content :(

Thanks