Firefox Problems with Boxes? Layout

Hi,
I have been working on a css template which will have a header, 3 center columns and a footer all contained within a outer box (bgcontain). I have managed to get this to work fine in IE, Opera, Netscape however in Firefox the footer does not stay at the bottom but moves to the right of bgcontain. However it I put in 4 character such as '....' ' abcd' the footer positioned itself at the bottom of bgcontain as it should.

I have put a border around bgcontain to see what is going on and also a border around the footer for the same reason. When I have the characters added in firefox the footer extends over the full size of bgcontain where in the other browers it is only the size of the footer. Without the characters the footer is the size of the footer but it moves to the right of bgcontain.

Can anyone advise me what is goig on and what can I do this to rectify it. I could just leave '....' next to the code which makes Firefox work but ideally I would like the code to do the work if possible.

My code is as follows:-

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>THE Directory CSS File</title>

.place-order {float:left; width:100px; height:25px; background: url(/directory/images/logos/place-order.jpg) no-repeat 0 0px;}
a.place-order:hover {float:left; width:100px; height:25px; background: url(/directory/images/logos/clickhere.jpg) no-repeat 0px 0px;}

body, table, tr, td, p{font-family:Arial, Verdana, Helvetica, serif; font-size: 9pt; color: #000000; font-weight:normal;}

p{margin-top: 0; margin-bottom: 0; margin-left: 0px; margin-right: 0px;}

body{background-color:#ffffcc; margin-left:0px; margin-right:0px; margin-top:20px; margin-bottom:20px; color:#000000; font-family:Arial, Verdana, Helvetica, serif;}

#bgcontain {width: 900px; margin: 0 auto; border: solid brown 5px; position: relative;}
/*BgContain is the outer edge of the web page and contains all of the web page - where WIDTH being the overall width of the web page*/

#leftcontent {position: absolute; left:0px;top:130px;width:115px;height:1400px;border:0px solid #fff; background-image:url(/directory/images/cell_back.gif);background-repeat:repeat-y;}
/*LeftContent is the left hand column set with a HEIGHT to ensure that it does not get covered over if there is only a small amount of content*/

#rightcontent {position: absolute; height:1400px; right:0px;top:130px;width:125px;background:#ffffff;border:0px solid #000;}
/*RightContent is the right hand column set with a HEIGHT to ensure that it does not get covered over if there is only a small amount of content*/

#content-shell {width:900px; background-image:url(/directory/images/cell_back.gif);background-repeat:repeat-y;}
/*Content-Shell is the outer area where the content will go with the WIDTH same as in BgContain*/

.content{float:left; width:660px; margin-left: 115px; margin-right: 125px; background:#feeeee;}
/*Content- This is where the main content of the web page will go. The margin-left will be set to the width of LeftContent and the margin-right will be set to the width of RightContent* - I use a invisible .gif set to the Height as in LeftContent and RightContent and aligned to left*/

#banner {background:#ffffff; width:900px;}
/*Banner is where the top banner will go with the WIDTH same as in BgContain*/
#footer {background:#ffffff; width:900px; text-align:center; border:10px solid #000;}
/*Footer is where the footer will go with the WIDTH same as in BgContain*/
</style>
</head>

</div>

</body>
</html>

Regards,
Robin

Firefox Problems with Boxes? Layout

robinantill

robinantill

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week