Grow your CSS skills. Land your dream job.

4 column fluid layout

  • # November 24, 2008 at 1:26 am

    i am working on a new personal site, trying to create a fluid (4) column layout, where depending on the browser width the columns shift down. it is actually a similar layout to chris’s old site (http://www.chriscoyier.net),…if you remember? no longer online. i have found a couple solutions using javascript, (http://fortes.com/projects/dynamiclayout/) but it seems like there has to be an cleaner way to achieve the effect.

    i appreciate any links you can forward me.
    thanks
    /trace

    # November 24, 2008 at 1:33 pm

    so it looks like it is much easier than i thought :shock:
    set a percentage width for each column , set a min-width..
    then let the float do it’s magic.
    thanks chris!
    /trace’

    Code:

    column 01
    column 02
    column 03
    column 04


    Code:
    .column {
    min-width: 200px;
    width: 24%;
    float: left;
    }
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".