CSS absolutely position element extends background

Question

I have a absolutely position div that is overlapping a containers background due to it having a larger height. This div is sharing the container with a body div that's sitting happily to the left of it.

Is there a way to extend the container to be the height of the absolutely positioned div, rather than the body content?

Or should I just float the divs side by side and chuck a <div style="clear: both"></div> at the bottom of the two? Seems like a messy hack to get a container to extend :/

EDIT: Comments don't seem to like code structure. So I'll edit it into here as well.

The layout is:

<div id="content">
   <div class="container">
      <div id="header"></div>
      <div id="main">
         <div id="column-1"></div>
         <div id="column-2"></div>
      </div>
   </div>
</div>

#content has a repeated background and #container sets the fixed width of the page. #header sits up to for the links and #main holds the two columns which have the main content for the page. I can't get those two columns to sit next to each other (float / absolutely) whilst having the #content's background repeat down below them

Answer 1

With this layout:

<div id="content">
  <div class="container">
    <div id="header"></div>
    <div id="main">
      <div id="column-1"></div>
      <div id="column-2"></div>
    </div>
  </div>
</div>

your basic CSS should be something like:

html, body, div { margin: 0; padding: 0; border: 0 none; }
body, #content { height: 100%; }
#main { overflow: hidden; }
#column-1 { float: left; width: 300px; }
#column-2 { float: left; width: 600px; }

You said you wanted the background image appearing below the content. From this I assume you mean you want the page to be full screen height (minimum).

The point of absolute positioning is that it removes the element from the normal flow so no you can't have it's "container" extend to include it because technically it has no container.

Absolute positioning has its place but 9 times out of 10 I get better results with a float-based layout. But I can't really say more without more information.