Grow your CSS skills. Land your dream job.

Faux Columns in WordPress

  • # February 7, 2009 at 1:44 pm

    I’m creating a new wordpress theme for my site and struggling with faux columns to ensure that it looks ok. I can’t for the life of me work out where to place the containing div so that it sits behind the two columns.

    Any ideas?

    http://graemepirie.com/new

    # February 7, 2009 at 2:32 pm
    "GPirie" wrote:
    I’m creating a new wordpress theme for my site and struggling with faux columns to ensure that it looks ok. I can’t for the life of me work out where to place the containing div so that it sits behind the two columns.

    Any ideas?

    http://graemepirie.com/new

    I would make your container have the faux column image, then make sure your divs for containing text is the correct size with no background, if I understood your correctly

    # February 9, 2009 at 3:51 pm

    Yeah I’ve placed the content div behind the posts area and sidebar and although I can alter the position of the div I can’t seem to set a background to be applied to it at the moment which is annoying.

    I’ve never tried this in WordPress before and I’m still not sure I’ve got the tags opening and closing in the right areas. When I view the div order using the web dev toolbar in firefox it shows them all in the correct place butwon’t let me set a background image.

    # February 9, 2009 at 4:13 pm
    "GPirie" wrote:
    Yeah I’ve placed the content div behind the posts area and sidebar and although I can alter the position of the div I can’t seem to set a background to be applied to it at the moment which is annoying.

    I’ve never tried this in WordPress before and I’m still not sure I’ve got the tags opening and closing in the right areas. When I view the div order using the web dev toolbar in firefox it shows them all in the correct place butwon’t let me set a background image.

    ok here is a way to try it:

    your main set it a certain size, and add the background image with 2 coloured columns all in 900px wide, you set the widths.

    column 1 = red (300px)
    column 2 = white (600px) //not exact just for example
    now add your sidebar over your red column so that sidebar should be (300px wide) then add your content over the white as 600px
    that should give your your faux columns. however, to make it seem more real, make your background image 1px in height, and have your css repeat it vertically

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