Layout problem in firefox

**Norrad** · Oct 5, 2004 02:15

I'v egot a small problem with a layout I'm working on and it views fine in Internet Explorer but messes up in Firefox and Netscape.

My Code is:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
<!--
body {
	margin: 15px 0px 0px;
	padding: 0px;
	text-align: center;
}
#topcontainer {
	width: 760px;
	margin: 0px auto 5px;
	padding: 0px;
}
#headerbox {
	border: 1px solid #999999;
	padding: 5px;
	text-align: center;
}
#maincontainer {
	width: 760px;
	margin: 0px auto;
	padding: 0px;
}
#leftcolumn {
	float: left;
	width: 160px;
	padding: 5px;
}
#searchbox {
	border: 1px solid #999999;
	padding: 5px;
	text-align: left;
}
#centrecolumn {
	float: left;
	width: 430px;
	padding: 5px;
}
#contentbox {
	border: 1px solid #999999;
	padding: 5px;
	text-align: left;
}
#rightcolumn {
	float: left;
	width: 140px;
	padding: 5px;
}
#statbox {
	border: 1px solid #999999;
	padding: 5px;
	text-align: left;
}
#bottomcontainer {
	width: 760px;
	margin: 5px auto 0px;
	padding: 0px;
}
#footerbox {
	border: 1px solid #999999;
	padding: 5px;
	text-align: center;
}
-->
</style>
</head>

<body>
<div id="topcontainer">
  <div id="headerbox">Header Box Content</div>
</div>
<div id="maincontainer">
  <div id="leftcolumn">
    <div id="searchbox">Search Box Content</div>
  </div>
  <div id="centrecolumn">
    <div id="contentbox">Content Box Content</div>
  </div>
  <div id="rightcolumn">
    <div id="statbox">Stat Box Content</div>
  </div>
</div>
<div id="bottomcontainer">
  <div id="footerbox">Footer Box Content</div>
</div>
</body>
</html>

The footer box overlaps the content in the main container in firefox and netscape. Any suggestions for a fix?

Kind regards
Norrad

**Paul O'B** · Oct 5, 2004 05:27

Hi,

You need to clear the floats.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
<!--
body {
 margin: 15px 0px 0px;
 padding: 0px;
 text-align: center;
}
#topcontainer {
 width: 760px;
 margin: 0px auto 5px;
 padding: 0px;
}
#headerbox {
 border: 1px solid #999999;
 padding: 5px;
 text-align: center;
}
#maincontainer {
 width: 760px;
 margin: 0px auto 0px;
 padding: 0px;
}
#leftcolumn {
 float: left;
 width: 160px;
 padding: 5px;
}
#searchbox {
 border: 1px solid #999999;
 padding: 5px;
 text-align: left;
}
#centrecolumn {
 float: left;
 width: 430px;
 padding: 5px;
}
#contentbox {
 border: 1px solid #999999;
 padding: 5px;
 text-align: left;
}
#rightcolumn {
 float: left;
 width: 140px;
 padding: 5px;
}
#statbox {
 border: 1px solid #999999;
 padding: 5px;
 text-align: left;
}
#bottomcontainer {
 width: 760px;
 margin: 5px auto 0px;
 padding: 0px;
 clear:both;
}
#footerbox {
 border: 1px solid #999999;
 padding: 5px;
 text-align: center;
}
.clearer {
 height:1px;
 overflow:hidden;
 clear:both;
 margin-top:-1px;
}
-->
</style>
</head>
<body>
<div id="topcontainer">
  <div id="headerbox">Header Box Content</div>
</div>
<div id="maincontainer">
  <div id="leftcolumn">
	<div id="searchbox">Search Box Content</div>
  </div>
  <div id="centrecolumn">
	<div id="contentbox">Content Box Content</div>
  </div>
  <div id="rightcolumn">
	<div id="statbox">Stat Box Content</div>
  </div>
</div>
<div class="clearer"></div>
<div id="bottomcontainer">
  <div id="footerbox">Footer Box Content</div>
</div>
</body>
</html>

The margins needed adjusting as well as mozilla has odd problems positioning from elements without borders.

Paul

**Norrad** · Oct 5, 2004 06:20

Thanks a lot,
Works perfectly now..

User Tag List

Thread: Layout problem in firefox

Thread Tools

Display

Hybrid View

Layout problem in firefox

Bookmarks

Bookmarks

Posting Permissions