Grow your CSS skills. Land your dream job.

How do you create a Liquid/Elastic centre in WP?

  • # November 21, 2009 at 9:41 am

    I’m currently using WP to theme a blog page located at this link: http://www.beebitz.com/blog/.
    The trouble is that I am trying to create a 3 column layout. The centre column needs to be liquid
    (but be centered as well) and the left and right columns each be a fixed-width. I can create such a layout
    in a basic .html page. See example here: http://www.liamjaydesigns.com/3_col_elast_test.html,
    but I cannot figure out how to create such a layout in WP.

    I’ve created several themes using WP before but have never had to create one with any elastic/fluid
    elements so this is defiantly the sticking point for me.

    Can anyone help me out with this or if not maybe point me in the direction of a WP lesson/tutorial
    that teaches you how to create such a layout.

    Oh and just in case this helps: I’ve used Chris’ "Personal Homepage Theme" as the base for this theme.

    # November 23, 2009 at 5:12 pm

    The liquidity or elasticity of a website has nothing to do with WP. If you can do it in regular HTML/CSS, there’s no reason you can’t port that over to WP.

    Start by developing the site in standard HTML, then slowly convert it to WP.

    # December 3, 2009 at 10:59 am

    I can see what your saying, but as I understand it floated columns begin "floating" at the point in the parent element’s text where they first appear, so my HTML page must contain the left and right column div elements before the middle column. This means that the layout is "order-dependent." So how do I get wordpress to "Get" both the left and right columns before the middle column?

    # December 3, 2009 at 1:32 pm

    If you want the left and right columns before the middle column, you only have to put them there. Move the

    Code:
    < ?php get_sidebar(); ?>

    or whatever code it is you’re using to call your sidecolumns, above the middle column. I guess you could even put them in header.php, to be dead sure they’ll end up above the middle column.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

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