1 reply [Last post]
hugoboss
Offline
newbie
Last seen: 13 years 5 weeks ago
Joined: 2009-07-10
Posts: 2
Points: 0

Hi there, im developing away from using tables and now delving in to using divs and CSS and now im hitting a bit of trouble with a footer placement in a 3 column layout. in Firefox the page shows fine, however when i do a browser check with Safari 3 and IE 8 the footer moves to the far right and jumps up into the .sidebarright div 10px from the bottom (at least it respects my padding)..
I have used a div to (id is "clear") just as break between the footer and the columns, but whether i remove it and apply clear:both to just the footer the problem is the same..

I've searched high and low for understandable fix's to this problem and have got no where can you guys please advise so i can carry on, thanks,

heres the code..

breaks in
Safari 3.2.2
IE v 8.

fine in Firefox
3.0.11

=======================
3 columns CSS

#sidebarleft {
width:180px;
padding:10px 10px 10px 10px;
background-color:#FF9;
float:left;
}

#main {
float:left;
width:480px;
background-color:#FF9;
padding:10px;
}

#sidebarright {
float:right;
width:180px;
padding:10px 10px 10px 10px;
background-color:#FF9;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

==========================
page bottom CSS

#clear {
clear: both;
position: relative;
height:20px;
}

#footer {
width:894px;
background-color:#000;
height:15px;
font-family:Arial, Helvetica, sans-serif;
font-size:9px;
text-align:center;
color:#FFF;
padding:3px;

}

===========================
The html at foot of page

 

hugoboss
Offline
newbie
Last seen: 13 years 5 weeks ago
Joined: 2009-07-10
Posts: 2
Points: 0

Everything is sorted now and

Everything is sorted now and i have noted rule number 1 thou shalt validate through W3 validator, problem was with an improperly closed , now is properly closed the problem has gone. :bigoops: