PRT
12-04-2007, 09:41 PM
Not sure how to describe this problem.
Everything worked on Firefox, Safari, Camino but not IE.
I using Mathew James Taylor's "The Perfect 3 Column Liquid Layout"
http://matthewjamestaylor.com/blog/perfect-3-column.htm
Then wrapped the whole thing in a 1024px centered DIV
You can see my problem here:
http://www.psgga.com/psg/index.html
I colored the DIV that won't stay contained: RED. You can only see the problem in IE though.
Here is the CSS. I've looked at so much I can no longer see it, if you know what I mean. :confused:
/* column container */
.colmask {
clear:both;
float: left;
width: 100%; /* width of page */
overflow: hidden;
background-color: #ffffff;
color: #333333; }
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%; /* width of page */
position:relative;
background-image: none;
background-color: #ffffff;
background-repeat: no-repeat; }
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding: 1em 0em 1em 0em; /* no left and right padding on columns, we just make them narrower instead only padding top and bottom is included here, make it whatever value you need */
overflow:hidden;
}
/* 3 Column settings */
.threecol {
background: #ffffff;/* right column background colour */
}
.threecol .colmid {
right:25%; /* width of the right column */
background: #ffffff; /* center column background colour */
}
.threecol .colleft {
right:50%; /* width of the middle column */
background: #ff0000; /* left column background colour */
}
.threecol .col1 {
width:46%; /* width of center column content (column width minus padding on either side) */
left:102%; /* 100% plus left padding of center column */
background-color: #ffffff;
}
.col1 p{
padding-left: 2em;
padding-right: 2em; }
.col1 h1 {;
font-size: 1.6em;
font-weight:normal;
color: #990000;
font-style: italic;
text-align: center;
padding-top: 1em; }
.col1 p {
text-align: justify; }
.threecol .col2 {
width:21%; /* Width of left column content (column width minus padding on either side) */
left:31%; /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
background-color: #ffffff;
}
.col2 p {
padding-left: 1em;
font-size: .9em;
text-align: right; }
.col2 h1 {
text-align: right;
padding-left: 1em;
}
.col2 h2 {
text-align: right;
padding-left: 1em;
font-weight: 400;
font-size: 1.4em;
margin-bottom: -.1em; }
.col2 h3 {
text-align: right;
padding-left: 1em;
}
.col2 img {
float: right;
padding-bottom: 3.5em; }
.threecol .col3 {
width:21%; /* Width of right column content (column width minus padding on either side) */
left:85%; /* Please make note of the brackets here: (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
background-color: #ffffff; }
.col3 p{
padding-right: 0em;
font-size: .9em; }
.col3 h1 {
text-align: left;
}
.col3 h2 {
text-align: left;
padding-right: 0em; }
.col3 h3 {
text-align: left;
}
Everything worked on Firefox, Safari, Camino but not IE.
I using Mathew James Taylor's "The Perfect 3 Column Liquid Layout"
http://matthewjamestaylor.com/blog/perfect-3-column.htm
Then wrapped the whole thing in a 1024px centered DIV
You can see my problem here:
http://www.psgga.com/psg/index.html
I colored the DIV that won't stay contained: RED. You can only see the problem in IE though.
Here is the CSS. I've looked at so much I can no longer see it, if you know what I mean. :confused:
/* column container */
.colmask {
clear:both;
float: left;
width: 100%; /* width of page */
overflow: hidden;
background-color: #ffffff;
color: #333333; }
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%; /* width of page */
position:relative;
background-image: none;
background-color: #ffffff;
background-repeat: no-repeat; }
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding: 1em 0em 1em 0em; /* no left and right padding on columns, we just make them narrower instead only padding top and bottom is included here, make it whatever value you need */
overflow:hidden;
}
/* 3 Column settings */
.threecol {
background: #ffffff;/* right column background colour */
}
.threecol .colmid {
right:25%; /* width of the right column */
background: #ffffff; /* center column background colour */
}
.threecol .colleft {
right:50%; /* width of the middle column */
background: #ff0000; /* left column background colour */
}
.threecol .col1 {
width:46%; /* width of center column content (column width minus padding on either side) */
left:102%; /* 100% plus left padding of center column */
background-color: #ffffff;
}
.col1 p{
padding-left: 2em;
padding-right: 2em; }
.col1 h1 {;
font-size: 1.6em;
font-weight:normal;
color: #990000;
font-style: italic;
text-align: center;
padding-top: 1em; }
.col1 p {
text-align: justify; }
.threecol .col2 {
width:21%; /* Width of left column content (column width minus padding on either side) */
left:31%; /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
background-color: #ffffff;
}
.col2 p {
padding-left: 1em;
font-size: .9em;
text-align: right; }
.col2 h1 {
text-align: right;
padding-left: 1em;
}
.col2 h2 {
text-align: right;
padding-left: 1em;
font-weight: 400;
font-size: 1.4em;
margin-bottom: -.1em; }
.col2 h3 {
text-align: right;
padding-left: 1em;
}
.col2 img {
float: right;
padding-bottom: 3.5em; }
.threecol .col3 {
width:21%; /* Width of right column content (column width minus padding on either side) */
left:85%; /* Please make note of the brackets here: (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
background-color: #ffffff; }
.col3 p{
padding-right: 0em;
font-size: .9em; }
.col3 h1 {
text-align: left;
}
.col3 h2 {
text-align: left;
padding-right: 0em; }
.col3 h3 {
text-align: left;
}