开发者

CSS absolutely position element extends background

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>开发者_如何学Go
      </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


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜