1 Reply Latest reply on May 14, 2006 10:44 PM by petertyler

    CSS – DIV’s not flowing in FF

    petertyler
      Hi, I am having a compatability issue with a simple div/css layout between IE and FF. Here is the code I am using:

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

      <style type="text/css">

      body {
      margin: 0px;
      padding: 0px;
      background-image: url("background.jpg");
      }

      body p {
      margin: 0px;
      padding: 0px;
      }

      #top {
      margin-top: 25px;
      float: right;
      width: 200px;
      border-left: 1px solid #000000;
      border-top: 1px solid #000000;
      border-right: 1px solid #000000;
      }

      #content {
      background-color: #FFFFFF;
      width: 500px;
      border: 1px solid #000000;
      margin-left: auto;
      margin-right: auto;
      }

      #wrapper {
      width: 502px;
      margin-left: auto;
      margin-right: auto;
      }

      </style></head><body>
      <div id="wrapper">

      <div id="top">
      <p>Home | Misc | Contact</p>
      </div>

      <div id="content">
      <p>Text goes here</p>
      </div>



      </div>
      </body>
      </html>

      It works fine in IE6 but the content div doesn’t flow on properly in FF.

      I tried settng the position: relative in both #top and #content divs, but this doesn’t help.

      Any ideas?

      Thanks,

      Peter.