layout nightmare -help!

[wardy83]

I'm having major problems with my layout..... its basically I want threee columns (one above the other) floated on the left, the content in the middle and another three columns one above the other - floateds on the right.

It looks ok in ie7 but I cant get it to work in firefox.

my code:

/* ################## SEARCH ################## */

#search {
clear: left;
width: 140px;
margin: 0px 10px 25px 10px;
padding: 25px 5px 5px 5px;
align: center;
border: solid 1px #e6e6e6;
font-size: 1.0em;
float: left;
background-position: top center;
background-image: url(../../../ieag_images/search.gif);
background-repeat: repeat-x;
}

/* ################## LOGIN ################## */

#login {
clear: left;
width: 140px;
margin: 0px 10px 25px 10px;
padding: 25px 5px 5px 5px;
align: center;
border: solid 1px #e6e6e6;
font-size: 1.0em;
float: left;
background-position: top center;
background-image: url(../../../ieag_images/login.gif);
background-repeat: repeat-x;
}

/* ################## RSS ################## */

#rss {
clear: left;
width: 140px;
margin: 0px 10px 25px 10px;
padding: 25px 5px 5px 5px;
align: center;
border: solid 1px #e6e6e6;
font-size: 1.0em;
float: left;
background-position: top center;
background-image: url(../../../ieag_images/rss.gif);
background-repeat: repeat-x;
}

/* ################## COMPONENT ################## */

#component {
margin-top: -170px;
clear: right;
width: 67%;
align: center;
border: solid 1px #e6e6e6;
float: left;
}

/* ################## SPONSORS ################## */

#sponsors {
position: relative;
margin-top: -170px;
width: 140px;
margin: 0px 10px 25px 10px;
padding: 25px 5px 5px 5px;
align: center;
border: solid 1px #e6e6e6;
font-size: 1.0em;
float: right;
background-position: top center;
background-image: url(../../../ieag_images/sponsors.gif);
background-repeat: repeat-x;
}

/* ################## ADVERTISEMENTS ################## */

#advertisements {
position: relative;
width: 140px;
margin: 0px 10px 25px 10px;
padding: 25px 5px 5px 5px;
align: center;
border: solid 1px #e6e6e6;
font-size: 1.0em;
float: right;
background-position: top center;
background-image: url(../../../ieag_images/advertisements.gif);
background-repeat: repeat-x;
}

/* ################## POLL ################## */

#poll {
position: relative;
width: 140px;
margin: 0px 10px 25px 10px;
padding: 25px 5px 5px 5px;
align: center;
border: solid 1px #e6e6e6;
font-size: 1.0em;
float: right;
background-position: top center;
background-image: url(../../../ieag_images/poll.gif);
background-repeat: repeat-x;
}

[edited by: wardy83 at 10:03 am (utc) on Dec. 14, 2007]

[SuzyUK]

Hi wardy83

can't really tell too much without the order of HTML flow too but I think it would be easier for you if you first divide the page into the three main divisions, e.g. left - middle - right columns.

That way you just need to position/float and dimension the three sections, then you can put the three stacking blocks into both the left and right columns without using too many floats and clears
- fwiw I think, but am guessing without seeing the HTML flow, it's gotta be all those clears.. I'm not sure you should need any of them

-Suzy

[wardy83]

Suzy, thanks for your help....

I have now done it and it works fine......

basically I put the three left and right columns into a single column each.... so in total I was only positioning three columns. css was as follows:

/* ################## LEFT ################## */

#left {
float: left;
width: 150px;
margin: 0px 15px 0px 15px;
}

/* ################## COMPONENT ################## */

#component {
float: left;
width: 65%;

}

/* ################## RIGHT ##################*/

#right {
float: left;
width: 150px;
margin: 0px 15px 0px 15px;
}