Treehouse: Grow your CSS skills. Land your dream job.

fluid sides and fixed main – centered layout?

  • # May 9, 2010 at 2:55 pm

    I having a hard time trying to find any examples, but what i want to accomplish is have a three column layout. The center column be centered and fixed width while the left and right columns are liquid and takes up the rest of the browser space that is not taken up by the center column.

    I have only seen the other way around where the left/right columns are fixed width and the center is fluid. or some form of this

    Does anyone have a direction they can shot me in? and or know how to do this?

    here is what i have tried, but i am stuck now… :?:

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">


    * { margin: 0; padding: 0; }
    html, body { height: 100%; color: white; font: 14px Georgia; background-color: #0b0b0b;}
    a { text-decoration:none; color:white;}
    a img { border: 0; }

    #page-wrap { }
    .clear { clear:both;}

    #leftCol { width: 100%; background:blue; height:100px; float:left;}
    #centerCol { margin:0 auto; width:400px; background:green; height: 200px; float:left;}
    #rightCol { width: 100%; background:blue; height:100px; float:left;}

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.