When Side Widgets are Longer Than Content

• 

  elizabethlarkin · Member · Dec 17, 2009 at 5:39 pm

  • Copy link
  • Add topic to favorites

  I just launched a new design based on Sandbox and am having some unforeseen issues here and there (already got one question answered, thanks!). Most posts, especially once they get comments, are long enough where this issues does not occur, but check out this specific post: http://thinkliz.com/2009/12/07/behind-the-scenes/. Scroll to the bottom and you will see that the sidebar widgets extends past the actual content. I can get the footer (with the curved edges) to go to the bottom below the widgets using “clear” but no matter what I’ve tried in CSS to content or container or whatever, I can’t get the white background to flow down to the bottom. Can anyone help?

  Here’s the CSS file: http://s3.wordpress.com/custom-css.php?blog=fQju&cache=4&rev=98

  The blog I need help with is: (visible only to logged in users)

• 

  devblog · Member · Dec 17, 2009 at 6:29 pm

  • Copy link

  Nice Sandbox skin.

  A few of observations and recommendations:
  To write your selectors like this is really unnecessary:

  div.sidebar {...}
  
  div#menu {...}

  This will suffice:

  .sidebar {...}
  
  #menu {...}

  Do not specify font-sizes in pixel units (font-size: 12px), that’s bad practice. Use em or % units instead. Pixel units are just for paddings and margins.

  Try keeping your code organized. It will help you in the future to find your selectors faster. I’d suggest structuring your stylesheet like this:

  Element selectors (body)
  ID selectors (#wrapper)
  Class selectors (.sidebar)

  Your issue

  Now, for what you want you’ll need to do several changes:

  First, you need to move the footer to the bottom of the page. Add this rule to your #footer definition to do that:

  clear: both;

  You’ll need to create a white background image for the #wrapper selector, and position it about 240px from the top so that it doesn’t cover your header. Something like this:

  #wrapper {
  background: transparent url(your-bgimg) 0 240px repeat-y;
  }

  Then, you’ll need to create a new background image for your footer. Why? because since you’re using rounded corners, you’d need to make the footer’s bg img, opaque so that the wrapper bg img doesn’t bleed out making the footer corners look squared.

  The opaque color of your footer background image should be the same as the beige-ish color of your overall bg. The HEX of that color is this:

  #F5F0DD;

  That should do it.

• 

  elizabethlarkin · Member · Jan 4, 2010 at 1:22 am

  • Copy link

  Thanks for the feedback on the coding format and for the idea on the white background. Unfortunately, when I added
  
background: transparent url(http://elizabethcarroll.files.wordpress.com/2009/12/thinkliz-white-middle.jpg) 0 240px repeat-y;

  to the wrapper, the white covered way too much. It didn’t matter what pixel measurement I put in place of 240px, it always started less than 100px from the top of the page which covered my header.

  Any ideas as to why?

• 

  elizabethlarkin · Member · Jan 4, 2010 at 1:24 am

  • Copy link

  I wonder, could it have anything to do with me having margin:auto; in the wrapper?

• 

  devblog · Member · Jan 4, 2010 at 8:29 pm

  • Copy link

  I’ll check this out when I get home. I’ll post as soon as I have something.