The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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 (,…if you remember? no longer online. i have found a couple solutions using javascript, ( but it seems like there has to be an cleaner way to achieve the effect.

    i appreciate any links you can forward me.

    # 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!


    column 01
    column 02
    column 03
    column 04

    .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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed