SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: 3 column design

  1. #1
    SitePoint Zealot sethtrain's Avatar
    Join Date
    Dec 2003
    Location
    Paducah, KY
    Posts
    174
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3 column design

    Okay here is my problem and the code for it. I am trying to make a personal site with the information shown in the Sitepoint book "Designing without tables using CSS". In chapter 6 they talk about the 3 column design with a header and a footer. I am stuck. My footer isn't displaying at the "bottom" of my page after everything is taken care of. It does display as you will see but I don't know how to fix it.

    Here is my CSS:

    Code:
    /* CSS Document */
    body {
      margin: 0;
      padding: 0;
    }
    #top {
      margin: 0px;
      background: #fff;
      height: 100px;
    }
    #left {
      position: absolute;
      left: 10px;
      top: 160px;
      width: 200px;
    }
    #center {
      margin-left: 220px;
      margin-right: 220px;
      background: #ccc;
    }
    #right {
      position: absolute;
      right: 10px;
      top: 160px;
      width: 200px;
    }
    #footer {
      background: #4B8CAC;
      text-align: center;
      margin: 0px;
      visibility: hidden;
    }
    Here is my HTML:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>SB : Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" href="structure.css" type="text/css">
    <link rel="stylesheet" href="format.css" type="text/css">
    <script src="x.js" type="text/javascript"></script>
    <script type="text/javascript">
    function adjustLayout()
    {
      // Get natural heights
      var cHeight = xHeight("centercontent");
      var lHeight = xHeight("leftcontent");
      var rHeight = xHeight("rightcontent");
      
      // Find the maximum height
      var maxHeight = Math.max(cHeight, Math.max(lHeight, rHeight));
      
      // Assign maximum height to all columns
      xHeight("center", maxHeight);
      xHeight("left", maxHeight);
      xHeight("right", maxHeight);
      
      // Show the footer
      xShow("footer");
    }
    window.onload = function()
    {
      xAddEventListener(window, "resize", adjustLayout, false);
      adjustLayout();
    }
    </script>
    </head>
    <body>
    <!-- Header -->
    <div id="top">
    	<div id="news"><a href="webdesign.php">Get Designed!</a></div>
    </div>
    
    <!-- Main Content Window with 3 Columns, the middle being the main window -->
    
    <!-- Left Column -->
    <div id="left"> 
      <div id="leftcontent"> <p>This is a test</p> </div>
    </div>
    
    <!-- Middle (Content) Column -->
    <div id="center">
      <div id="centercontent"> <p>This is a test</p> </div>
    </div>
    
    <!-- Right Column -->
    <div id="right"> 
      <div id="rightcontent"> <p>This is a test</p> </div>
    </div>
    
    <!-- Footer -->
    <div id="footer">
      This footer should float below the three columns
    </div>
    
    </body>
    </html>
    I guess I should note that I am using the x.js file that is provided with the books code. Can anyone tell me how to fix this?
    --
    sethtrain

  2. #2
    SitePoint Zealot sethtrain's Avatar
    Join Date
    Dec 2003
    Location
    Paducah, KY
    Posts
    174
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have I stumped everyone? I think the problem has to do with my header and footer margins. If I set them to 20px like the book has then it fixes some of the problems. I don't want that though. I thought this might help.
    --
    sethtrain

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,490
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The answers simple:

    You need to start the columns in the same place!

    Code:
    #left {
      position: absolute;
      left: 10px;
      top: 100px;
      width: 200px;
      background:blue;
    }
    You had 160px for theleft column instead of 100px.

    It should work now.

    Paul

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,490
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hooray I've got my badge at last

  5. #5
    SitePoint Zealot sethtrain's Avatar
    Join Date
    Dec 2003
    Location
    Paducah, KY
    Posts
    174
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    something so simple that i guess i just overlooked...

    thanks
    --
    sethtrain


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
  •