SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot Norrad's Avatar
    Join Date
    Nov 2003
    Location
    Thailand
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Layout problem in firefox

    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,363
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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

  3. #3
    SitePoint Zealot Norrad's Avatar
    Join Date
    Nov 2003
    Location
    Thailand
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot,
    Works perfectly now..


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •