#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Stratford-upon-Avon, UK
    Posts
    66
    Rep Power
    11

    Angry [resolved] Balance height of css columns


    Hi

    I've been experimenting with doing away with the 3 column table design of my site and replacing it with css containers.

    This is the simple html code for the trial page:

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"
    >
    <
    HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD>
    <
    STYLE type=text/css>#container {
        
    BORDER-RIGHTgray 1px solid;
        
    PADDING-RIGHT10px;
        
    BORDER-TOPgray 1px solid;
        
    PADDING-LEFT10px;
        
    PADDING-BOTTOM10px;
        
    MARGIN10px auto;
        
    BORDER-LEFTgray 1px solid;
        
    WIDTH760px;
        
    PADDING-TOP10px;
        
    BORDER-BOTTOMgray 1px solid
    }
    #banner {
        
    PADDING-RIGHT5px;
        
    PADDING-LEFT5px;
        
    MARGIN-BOTTOM5px;
        
    PADDING-BOTTOM5px;
        
    PADDING-TOP5px;
        
    BACKGROUND-COLORrgb(213,219,225)
    }
    #content {
        
    PADDING-RIGHT5px;
        
    PADDING-LEFT5px;
        
    PADDING-BOTTOM5px;
        
    MARGIN-LEFT215px;
        
    MARGIN-RIGHT215px;
        
    PADDING-TOP5px;
        
    BACKGROUND-COLORgray
    }
    #sidebar-a {
        
    PADDING-RIGHT5px;
        
    PADDING-LEFT5px;
        
    FLOATleft;
        
    PADDING-BOTTOM5px;
        
    MARGIN0px 5px 0px 0px;
        
    WIDTH200px;
        
    PADDING-TOP5px;
        
    BACKGROUND-COLORrgb(235,235,235)
    }
    #sidebar-b {
        
    PADDING-RIGHT5px;
        
    PADDING-LEFT5px;
        
    FLOATright;
        
    PADDING-BOTTOM5px;
        
    MARGIN0px 0px 0px 5px;
        
    WIDTH200px;
        
    PADDING-TOP5px;
        
    BACKGROUND-COLORrgb(235,235,235)
    }
    #footer {
        
    CLEARboth;
        
    PADDING-RIGHT5px;
        
    MARGIN-TOP5px;
        
    PADDING-LEFT5px;
        
    PADDING-BOTTOM5px;
        
    PADDING-TOP5px;
        
    BACKGROUND-COLORrgb(213,219,225)
    }
    </
    STYLE>
    </
    HEAD>
    <
    BODY>
    <
    DIV id=container>
    <
    DIV id=banner>&nbsp;</DIV>
    <
    DIV id=sidebar-a></DIV>
    <
    DIV id=sidebar-b></DIV>
    <
    DIV id=content>&nbsp;</DIV>
    <
    DIV id=footer>&nbsp;</DIV></DIV></BODY></HTML
    Now, the problem is that if I put some content in the left sidebar (a) it extends down, but the others do not follow. I could make each a fixed height, but the site uses variable content from a database to fill the sidebars, and an overly long height would push the footer way out of sight.

    Any thoughts?




    Trevor
    Last edited by clevatreva; January 4th, 2004 at 03:16 AM.
    "Good artists copy, great artists steal." Pablo Picasso
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955
    I believe the answers you want can be found at /*Position Is Everything*/.

    You will also find the answers to those perplexing float issues.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Stratford-upon-Avon, UK
    Posts
    66
    Rep Power
    11
    Hi Gary

    Thanks for that.

    I think I shall find the answer there, as it looks like what I'm after.





    Trevor
    "Good artists copy, great artists steal." Pablo Picasso

IMN logo majestic logo threadwatch logo seochat tools logo