PDA

View Full Version : IE 6 colum positioning error




Cabbit
Mar 8, 2009, 11:51 AM
Hey i made this 3 column layout link (http://absolution-guild.net/colum_test.html) using a very good example here (http://matthewjamestaylor.com/blog/perfect-3-column.htm) however that one works perfectly in ie 6 and mine squishes and hides it all to one side. Both pages for demonstration have the full source code available to view using the show source in a browser.

Basically it would be nice to have a few folks ponder over it to see what i am missing that messes it up please.



Cabbit
Mar 8, 2009, 05:27 PM
Got it looking a wee bit better in ie 6.
achual page (http://absolution-guild.net/index.php)

ie 6 renderer (http://ipinfo.info/netrenderer/index.php)


CSS effected
/******* Collums *********/
/* 'widths' sub menu */
#layoutdims {
clear:both;
border-top:4px solid #000;
margin:0;
padding:6px 15px !important;
text-align:right;
}
/* column container */
.container {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
/* holy grail 3 column settings */
.page {
}
.page .colmid {
float:left;
width:200%;
margin-left:-12em; /* Width of right column */
position:relative;
right:100%;
}
.page .colleft {
float:left;
width:100%;
margin-left:-50%;
position:relative;
left:24em; /* Left column width + right column width */
}
.page .col1wrap {
float:left;
width:50%;
position:relative;
right:12em; /* Width of left column */
padding-bottom:1em; /* Centre column bottom padding. Leave it out if it's zero */
}
.page .col1 {
margin:0 12.5em; /* Centre column side padding */
position:relative;
left:200%;
overflow:hidden;
}
.page .col2 {
float:left;
float:right; /* This overrides the float:left above */
width: 12em; /* Width of left column content (left column width minus left and right padding) */
position:relative;
right:0em; /* Width of the left-had side padding on the left column */
overflow:hidden;
}
.page .col3 {
float:left;
float:right; /* This overrides the float:left above */
width:12em; /* Width of right column content (right column width minus left and right padding) */
margin-right: 0em; /* Width of right column right-hand padding + left column left and right padding */
position:relative;
left:50%;
overflow:hidden;
}