Thread

I’m working on a new site and I’ve designed it as a 3 column layout with a background image.

THE PROBLEM
On pages where the main content is just a paragraph or two, the background image doesn’t extend to the bottom of the sidebar - only to the bottom of the main content.

I’ve tried a million (give or take a few) different things and I just can’t figure it out.

I’d appreciate any and all ideas.

THE SITE
Here’s an example of a problem page:
http://inspiredtoaction.com/index.php/site/comments/this_is_another_test_entry_poodles_are_cute/

FYI - The site is called Inspired To Action and it’s mission is to “equip and inspire people to take action on behalf of those in need”:

Thanks for your help!!!

Kat

Iguess the 3 columns are floated? If so just put (assuming columns are floated left?)

div#column-parent-container:after {
    content: ".";
    display: block;
    clear: left;
    height: 0;
    visibility: hidden;
}

the_butcher,
Thanks for your helpful reply.

I’m afraid I’m not entirely clear on the usage though. Could you help clarify for me?

The parent container is called wrapper, so I assume it should look like this:

div#wrapper:after {
    content: ".";
    display: block;
    clear: left;
    height: 0;
    visibility: hidden;
}

But is something supposed to go in the “Content” property between the quotes where the . is?

I’ve tried a couple things, but it’s not quite working for me yet.

Thanks!

Kat

Why do I always figure things out right after I post a question?

I figured it out, I put my sidebar div where the . was and it all works brilliantly.

Thank you SO much! I seriously appreciate it. You’re a genius.

Kat

Hmm… !?

The “.” is the only intentional ‘content’.  All that does it print a “.” to your generated source code, block it, set it to clear (dragging your background down to the lowest column) and then hide the “.” from view.

In theory :D

All you’ve done by writing “sidebar” is made that appear in the generated source code rather than a plain old full stop.