Support » Themes and Templates » Faux column hell

  • Alright, I know this one has been beaten to death but here goes…
    I have a theme that is basically laid out like this (I’ll excerpt the main points).

    page {
    background: url("<?php bloginfo('stylesheet_directory'); ?>/images/bg.png") top repeat-y ;} 
    <div id="header"> <-- top header image/ingo
    <div id="page"> <-- used for "faux column" background as per above
      <div id="content> <-- content of posts/pages
      <div id="sidebar"> <-- obligatory sidebar to the right of the content
      ul etc.
      <div id="footer"> <-- no problems here clear: both lands on the bottom
      site name/powered by..
    </div> <-- end of "page" where background "works".

    Here’s where I get messed up. If I end the “page” div after the footer all is well and the faux column extends to the end of the footer. While this is all fine and dandy, if I wanted that, but I have a transparent png at the footer that looks strange. If I end the “page” div before the footer and the contents of the “content” div is longer than the sidebar, I end up with the background image ending just after the sidebar. I know this is not how a faux column should work. What am I missing? I’m fairly new to designing with css as I usually muck around with backend than front end. I know I’m leaving out a lot of detail, but I’ll fill in any blanks. Thanks in advance.

Viewing 1 replies (of 1 total)
  • Figured it out on my own. . .by adding an extra div before the footer (which conveniently could be used for ads later) and clearing both. duuuuuh. Sometimes you just need to walk away and take a break.

Viewing 1 replies (of 1 total)
  • The topic ‘Faux column hell’ is closed to new replies.