WordPress.org

Ready to get started?Download WordPress

Forums

Fluid Center 3-Column CSS WP Layout (27 posts)

  1. NuclearMoose
    Member
    Posted 9 years ago #

    pez,
    Check out the Piefecta setup at http://positioniseverything.net/ and you will find some very good documentation and all the CSS you need to set something like this up.

  2. Root
    Member
    Posted 9 years ago #

    You need Ryan Brills negative margin layout at alistapart.

  3. wairoanz
    Member
    Posted 9 years ago #

    This maybe a bit dated now, but if you haven't already come across it, then it may give you some clues... http://bluerobot.com/web/layouts/layout3.html

  4. Root
    Member
    Posted 9 years ago #

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

  5. serendipity
    Member
    Posted 9 years ago #

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

  6. Anonymous
    Unregistered
    Posted 9 years ago #

    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.

  7. Root
    Member
    Posted 9 years ago #

    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.

  8. pezastic
    Member
    Posted 9 years ago #

    After spending numerous hours searching for a cross-browser solution to my 3-column template problem, I came across these three candidates:
    http://meadhra.com/CNET/040714/3col-float-FigD.html
    http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM_C.mhtml
    http://www.pmob.co.uk/temp/3colfixedtest_sourcenone.htm
    I think it would be fantastic if someone-in-the-know could adapt one of those to WP.

  9. Anonymous
    Unregistered
    Posted 9 years ago #

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

  10. Stuart
    Member
    Posted 9 years ago #

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

  11. theglobalguy
    Member
    Posted 9 years ago #

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

  12. Mark (podz)
    Support Maven
    Posted 9 years ago #

    I took your hint actually - I've been watching :)

  13. Root
    Member
    Posted 9 years ago #

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

  14. theglobalguy
    Member
    Posted 9 years ago #

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

  15. Mark (podz)
    Support Maven
    Posted 9 years ago #

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

  16. Root
    Member
    Posted 9 years ago #

    Well its orange! h scroll is wierd. Width is 100% with max width. This must be an IE thing. Try different viewport sizes please.

  17. Root
    Member
    Posted 9 years ago #

    h scroll is now dead.

  18. theglobalguy
    Member
    Posted 9 years ago #

    Here's what it looks like on both Firefox and IE latest versions:
    http://www.theglobalguy.com/wp-photos/rootshot.jpg

  19. Root
    Member
    Posted 9 years ago #

    Thanks. Seems Ok. Its too late now :)

  20. Joni
    Member
    Posted 9 years ago #

    I swear, t'was not I who anonymously suggested tables. That layout looks great, but it makes me very hungry for an orange popsicle which I just happen to remember I have in my freezer.
    http://www.popsicle.com/treats/Fun_and_Fruity.asp
    Later!

  21. pezastic
    Member
    Posted 9 years ago #

    @theglobalguy: Replace the following in your css and all will look good, at least with IE 6:
    #lh-col {
    position: absolute;
    top: 156px;
    left: 0;
    width: 200px;
    z-index: 3;
    background: #063;
    background-image: url(images/flwblockb.jpg);
    color: #fff;
    }
    #rh-col {
    position: absolute;
    top: 156px;
    right: 5px;
    width: 200px;
    z-index: 7;
    background: #063;
    background-image: url(images/flwblockb.jpg);
    color: #333;
    }
    #c-col {
    margin: 0 210px 0 205px;
    position: relative;
    padding: 0;
    background: #063;
    background-image: url(images/flwblockb.jpg);
    color: #333;
    z-index: 5;
    height: 80%;
    }

  22. Root
    Member
    Posted 9 years ago #

    Thanks for pointing out the bugs in Vesuvius and to the guys who have put up screenies. It is really useful. I will certainly be tweaking. But that is now four of my templates which have borked on the comments page, when they got started.
    I do not know what causes it but there is something spooky about those comments, both inline and in the pop ups.

  23. theglobalguy
    Member
    Posted 9 years ago #

    @pez -- Thanks, that seems to have done the trick!
    To fix the weather size, I just explicitly specified the .gif size in index.php. We only have 'net access for about 8 hours a day, so unfortunately there are times when the weather data times out, and you'll get the "no data available" message.

  24. Root
    Member
    Posted 9 years ago #

    I have to say it is really wierd how the li children are set at 142% in the default. Tx for pointing it out. I have also applied my comment box hack to the odd behavior of the comment input box. Hopefully that is going to solve most of the issues.

  25. Bunker
    Member
    Posted 9 years ago #

    Got me all interested...then the links don't work!

  26. orangeguru
    Member
    Posted 9 years ago #

    This is becoming my fav WP support link:

    http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

    ;-)

    Regarding the old discussion tables vs CSS:

    If you feel comfy with CSS use it - otherwise use one simple table to define your blog structure.

  27. BenDG
    Member
    Posted 9 years ago #

    I guess I should put this layout demo http://stijlstek.nl/demo/beirut/
    into a WP theme sometime. I know it's not perfect, but at least it works in Firefox and IE (don't know about Mac browsers yet). It's a pure CSS solution, and it seems people want something like that.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.