Thread: CSS Layout

    #1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2003
    Location
    Buenos Aires, Argentina
    Posts
    1
    Rep Power
    0

    Question CSS Layout


    I'm trying to build a site using CSS layout and no tables but I've found one particular thing were is obvious that I'm soing
    something wrong.

    I'm trying to do 2 columns and a footer.

    the code is this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
      <meta http-equiv="content-type"
     content="text/html; charset=ISO-8859-1">
      <title>test</title>
      <style>
    #content {
    border: 1px black dotted;
    width: 300px;
    float: left;
    }
    #navbar {
    border: 1px black dotted;
    width: 100px;
    }
    #footer {
    border: 1px black dotted;
    width: 400px;
    float: left;
    }
    
      </style>
    </head>
    <body>
    <div id="content">content</div>
    <div id="navbar">navbar</div>
    <div id="footer">footer</div>
    </body>
    </html>

    this is how it looks in IE (fine)


    this is how it looks in Mozilla (broken!)


    How is this supposed to be made? Any ideas?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2001
    Location
    sydney, australia
    Posts
    68
    Rep Power
    14
    try this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="content-type"
    content="text/html; charset=ISO-8859-1">
    <title>test</title>
    <style type="text/css" lang="css">
    <!--
    #content {
    border: 1px black dotted;
    }
    #navbar {
    border: 1px black dotted;
    width: 25%;
    float: right;
    }
    #footer {
    border: 1px black dotted;
    width: 400px;
    float: left;
    }
    #all{
    width: 400px;
    padding: 0px;
    margin: 0px;
    }
    -->
    </style>
    </head>
    <body>
    <div id="all">
    <div id="navbar">navbar </div>
    <div id="content">content </div>
    </div>
    <div id="footer">footer </div>
    </body>
    </html>

IMN logo majestic logo threadwatch logo seochat tools logo