3 column layout with removable columns?

[sirlemonhead]

Hi,

I want a 3 column layout, a left column for links, a center 'main content' column and then a right side links column again.

I have the left column and the middle column floated left, and the right column floated right. I'm setting percentage widths for each column.

This works fine in Opera and Firefox, but in IE the top of the right column starts at the bottom of the main content, so I have a giant gap on the right side and have to scroll down the entire content of the page to see the right column. Any ideas how to fix this?

Also, if I want to remove these columns in certain pages, is it possible to write the css code so that I can simply not code in the columns in the HTML, having the CSS auto center the main content div so it's 100% of the page?

Using this code for the moment:

#main_content {
background-color: #E5F2F1;
width: 60%;
height: 600px;
float: left;
background: #E5F2F1 url('images/i.gif') no-repeat center;
}

#left_col {
float: left;
width: 20%;
}

#right_col {
float: right;
width: 20%;
}

Within the left_col and right_cols are unordered lists containing links.

Cheers

 

[toosepin]

Have you removed the column content to see if thats caused the bug in IE?

With regards to your second query, try this:

#main_content {
margin: 0 auto;
width: 60%;
height: 600px;
background: #E5F2F1 url(images/i.gif) no-repeat center;
}

#left_col {
float: left;
width: 20%;
}

#right_col {
float: right;
width: 20%;
}

Edit: Make sure your structure is:

#main
#left
#right

and that you clear your floats afterwards.

 

[sirlemonhead]

Removing the sidemenu content will just show the page without the sidemenus...blank spaces at either side of the main content.

If I add 'clear: left;' to right_col, it fixed the problem in IE, but breaks it in Opera and Firefox. Setting the maincontent width to 59% also fixes it, but introduces a gap I dont want.

Content not fitting properly in IE?

 

[sirlemonhead]

For number 2, what do you mean by clear my floats afterwards? Using that css code, I get the maincontent first, then under that on the left, the left column, then to the far right of that, the right column.

 

[Wimnat]

Change the right column width to 19% or 18% to fix the IE bug then give the main column an invisble border so it all aligns properly. It's an ugly hack but it's the way ugly is the way i like it

 

[sirlemonhead]

I have it looking perfect in IE now (more or less) but not in Opera and Firefox. The main content is in the wrong place.

Here's how its meant to look (with header image scribbled over )

IE 7
http://homepage.eircom.net/~duncandsl/temp/ie7.jpg

Opera 9
http://homepage.eircom.net/~duncandsl/temp/opera9.jpg

The white square in the top right corner in Opera is a second header image, that has a white background, so fits in fine in IE when the main content isnt up there..
Firefox looks identical to Opera. IE 6 looks fine too but just has a minor padding issue with the side column links.

CSS is currently:

#page_container {
width: 100%;
margin: 0px auto;
background-color: #E5F2F1;
display: inline;
}
#main_content {
margin: 0 auto;
width: auto;
height: 600px;
background: #E5F2F1 url(images/i.gif) no-repeat center;
}

#left_col {
float: left;
width: 20%;
/*margin: 0;*/
}

#right_col {
float: right;
width: 20%;
}
.column_header {
/*height: 30px;*/
/*padding: 8px, 0px, 5px, 10px;*/
padding-left: 10px;
padding-top: 8px;
padding-bottom: 8px;
background-color: #5CD2CE;
border-bottom: 2px solid #FFA200;
}

/* Unordered list used to make a vertical menu */
#left_col ul, #right_col ul {
list-style: none; /* removes bullet points from list */
margin-left: 0px;
padding-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 5px;
background-color: #fff;
}

#left_col a, #right_col a {
display: block; /*makes links run vertically rather than side by side */
/*padding: 2px;*/
padding-bottom: 2px;
width: auto;
color: #000;
/*background-color: #036;*/
background-color: #fff;
/*border-bottom: 1px solid #eee;*/
font-size: 75%;
padding-left: 14px;
}

#left_col a:link, #left_col a:visited {
/* color: #EEE;*/
text-decoration: none;
}

#right_col a:link, #right_col a:visited {
/*color: #EEE;*/
text-decoration: none;
}

#left_col a:hover, #right_col a:hover {
background-color: #369;
color: #fff;
}

HTML code goes in this order:

pagecontainer
header
navcontainer (the mainmenu)
left col
right col
main content

Any ideas? Really appreciate the help guys.