Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jul 2003
    Location
    Ontario, Canada
    Posts
    129
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need some help with a Layout. Header, 3 Columns, Footer

    Hey, I'm trying to do this layout in CSS, and I've gone over it a few times, with no luck. I'm trying to make a page that has a header, 3 columns, and a footer - a farily common layout. The problem I'm having is with the containing DIVs. I want the 3 columns to all be the same height. I've attached a graphic that will show you the idea I want. Note, the left and right column will not have enough information in them to make them expand to the height of the center column.

    Again, I want all 3 columns to be the same height.

    Here's what I've tried so far...
    Code:
    <style>
    BODY {background: #DADADA;}
    #Container {
        width: 600px;
        background: #FFFFFF;
    }
    
    /*Header*/
    #Header {
        float: left;
        width: 600px;
        background: #000000;
    }
    
    /*Left Column*/
    #Column1 {
        float: left;
        width: 150px;
        bgcolor: #DADADA;
    }
    
    /*Center Column */
    #Column2 {
        float: left;
        width: 300px;
        background: #FFFFFF;
    }
    
    /*Right Column */
    #Column3 {
        float: left;
        width: 150px;
        background: #FFFFFF;
    }
    
    /*Footer*/
    #Footer {
        float: left;
        width: 600px;
        background: #000000;
    }
    </style>
    <body>
    <div id="Container">
        <div id="Header">
        </div>
        <div id="Column1">
        </div>
        <div id="Column2">
        </div>
        <div id="Column3">
        </div>
        <div id="Footer">
        </div>
    </div>
    </body>
    If anyone can guide me in the right direction, I'd REALLY appreciate it!!!

    Thanks

    IC
    Attached Thumbnails Attached Thumbnails Need some help with a Layout.  Header, 3 Columns, Footer-layoutexample.jpg  

  • #2
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is a pretty common problem, and luckily there's a fairly simple solution:
    http://www.alistapart.com/articles/fauxcolumns/

    Hope that helps.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #3
    Regular Coder
    Join Date
    Jul 2003
    Location
    Ontario, Canada
    Posts
    129
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks!!

    That will definately work for my layout that I'm doing...

    I'm just wondering, is there a way to do it without the BG Image?

    Thanks

    IC

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Sadly, that's the whole point of the "faux-columns" thing. You can use "display: table-cell" but it won't work in Safari. Or, you can try adapting this example to work with three columns...


  •  

    Posting Permissions

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