Forum Moderators: not2easy
However, I am running into trouble with the layout and columns overlapping when resizing the browser window.
I have a header file that includes the top, left and right columns. My issue is with the middle column. There are multiple files where it is displayed depending on the link you choose.
What I'm looking for is a fixed width right and left columns and have the middle column stretch accordingly. I somewhat have that, but would like to keep the right column from overlapping the middle.
Here is part of my css file.
Like I said, I can't define the middle column in the same file as the other columns, so I'm not sure how to go about this.
Let me know if you need any other info.
You can see what I've got so far at:
<No URLs, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>
Thanks in advance!
div.leftColumn {
background: transparent;
border: 0px solid #555;
left: 10px;
padding: 5px;
position: absolute;
top: 246px;
width: 240px; /* Incorrect IE5 value */
z-index: 2;
voice-family: "\"}\"";
voice-family: inherit;
width: 218px;
}
html>body div.leftColumn {
width: 218px;
}
div.topColumn {
background: transparent;
border: 0px solid #555;
margin: 0px 170px 0px 0px;
min-width: 200px;
padding: 0px;
position: relative;
width: auto;
z-index: 3;
}
div.middleColumn {
background: transparent;
border: 0px solid #555;
margin: 36px 420px 10px 240px;
min-width: 200px;
padding: 5px;
position: relative;
width: auto;
z-index: 3;
}
div.rightColumn {
background: transparent;
border: 0px solid #555;
padding: 5px;
position: absolute;
top: 246px;
float: right;
right: 190px;
width: 240px; /* Incorrect IE5 value */
z-index: 1;
voice-family: "\"}\"";
voice-family: inherit;
width: 218px;
}
html>body div.rightColumn {
width: 218px;
}
[edited by: SuzyUK at 8:26 am (utc) on Mar. 10, 2005]
