WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Lining up sidebars and backgrounds (6 posts)

  1. Blade21292
    Member
    Posted 7 years ago #

    Ok, very simply, I want the page to look like this:

    http://www.smalltownbiglife.com

    But this is what I get:

    http://www.smalltownbiglife.com/wordpress

    I can't seem to figure out how to get the sidebars to extend all the way down to the footer, evenly. I also don't understand why my background img stops at the header.

    I'm sure this is a quite common problem and there's bound to be a supporting document on it somewhere. If so, just point me in that direction.

    Thank you.

  2. moshu
    Member
    Posted 7 years ago #

    1. Google for "faux columns".

    2. Because you told so in your stylesheet: to repeat only horizontally. (delete the repeat declaration)

  3. Blade21292
    Member
    Posted 7 years ago #

    I'll look into the "Faux Columns". From what I've seen so far, that looks like it only works when the viewers browser is fully expanded.

    As for the background, you were absolutely right in the repeat. Duh! Now the problem is that IE shows the right colors, but Firefox shows the background image instead.

  4. moshu
    Member
    Posted 7 years ago #

    2. Because you are missing a semicolon:

    #content {
    	background: #ffffff;   <====

    1. No. Faux columns always work - if done properly. Basically, the technique replaces the sidebar's bg colour with a repeating bg-img, so they will always have the bg "colour" regardless of the length of the different columns. The trick is to place the bg image NOT in the sidebar but in the container element hierarchically above...
    (As it is now, if you take out the archives, links, meta from the right sidebar - the blue would "shrink" up to the bottom of the about me section)

  5. Blade21292
    Member
    Posted 7 years ago #

    Thank you

  6. poesleeve
    Member
    Posted 6 years ago #

    Just an FYI:

    I use Firefox mainly and tried the faux columns fix, which STILL didn't work.

    What finally DID work was adding this line of code to the CSS for the container:

    {display: table;}

    Hope this helps someone out there.

Topic Closed

This topic has been closed to new replies.

About this Topic