Support » Themes and Templates » Fluid Center 3-Column CSS WP Layout

  • Okay, I’m stupid. I tried to make one, but failed. Has anyone done this and can share the css and xhtml?
    Here is what I’m looking for, in order of importance:
    3 column template
    Equilized column lengths
    Fluid center column for content
    Exact width left column for link and category lists
    Exact width right column for search, calendar, and archive list
    Gutters around the columns
    Source ordering
    Can someone produce any of these?

Viewing 15 replies - 1 through 15 (of 27 total)
  • pez,
    Check out the Piefecta setup at and you will find some very good documentation and all the CSS you need to set something like this up.

    You need Ryan Brills negative margin layout at alistapart.

    This maybe a bit dated now, but if you haven’t already come across it, then it may give you some clues…

    Here is something I prepared earlier
    . Please note this is a boilerplate and my templates have changed names since.

    Great! Another source of inspiration for WP based newbie web designers.

    Use a table. Seriously. As things currently stand, you cannot produce a cross-browser compatible, fluid three-col layout with columns of equal length using CSS alone. Give up the liquid central column, give up the equal lengths, or give up the dream of doing it with CSS. No technology is perfect.

    I have spent a lot of time futzing with 3 col flexible widths for *Vesuvius*. This kind of stuff is the very reason it is still where it belongs. On the drawing board.
    As I understood the negative margin solution the source order was reversed in the 3 col solution. although the 3 px jog is presumably curable. Just my 2c.

    After spending numerous hours searching for a cross-browser solution to my 3-column template problem, I came across these three candidates:
    I think it would be fantastic if someone-in-the-know could adapt one of those to WP.

    @serendipity: the original poster asked how to make a specific kind of layout for WP. I advised them to use a table. That is support. It may not be support for CSS, but it is support for the user.
    Off-topic sniping at other posters, however, is not support in any sense of the word.

    Mmmm. Fluid eh? Maybe I should have a look. Do you have anything up and running? Or can I get your CSS. I usually find it best to “fix” the menu widths and let the content fill the centre but unless I can see where you’re at????

    @pez, take a look at my site…three column, center fluid works great with WP. No gutters, but I don’t really like them anyway.

    Mark (podz)


    Support Maven

    I took your hint actually – I’ve been watching 🙂

    Sheesh. You found it then? Is it OK in IE anybody?

    @pez, any chance you could send me a screen shot? I’m using IE6 90% of the time, and I’m not seeing the errors you’re talking about. I’m especially concerned about the center column expanding under the rightside one. I have seen the weather box do that occassionally, but if I refresh it goes away..maybe I need to do something about that.
    Each section is not in it’s own div. There’s basically a header, footer, center, left and right div.
    The column lengths on my screen extend all the way to the bottom…if you look very carefully you can see where the background image intersects between the columns and the footer.

    Mark (podz)


    Support Maven

    I see no green, and I get a horiz scrollbar of about 2px ?

Viewing 15 replies - 1 through 15 (of 27 total)
  • The topic ‘Fluid Center 3-Column CSS WP Layout’ is closed to new replies.