ansaurus

Question

Answer 1

+1 A:

In theory, you are correct. Making it position: relative should resume normal flow, which would push down the footer. That said, there may have been a good reason why it was made absolute in the first place.

Scott Cranfill 2010-03-02 22:06:26

You've got it. The issue is that relative position wont let me overlap the post title div. (see image example)

askon 2010-03-04 13:03:58

Hmm... I am not sure there is a way to fix this that doesn't involve JavaScript. You may have to detect the height of the sidebar on page load and then set a fixed height on the wrapper that is tall enough.

Scott Cranfill 2010-03-04 16:18:48

Answer 2

+1 A:

dont worry just just use the following css code in your footer div:

clear:both; marin-top:20px

or as per your requirement. margin-top css property will solve your issue.

wordpressapi 2010-03-04 18:36:38

The issue is the the sidebar's overflow is dynamic, if it were always a (X)px overflow that solution would be wonderful!

askon 2010-03-04 21:29:18

Since your name suggests your a wordpress enthusiast, do you know any blogs that use a similar format with overlapping sidebar?

askon 2010-03-04 21:47:44

Answer 3

A:

After a slow day at work I devised a method of doing this without absolute positioning.

It looks like I can use float to overlap the post titles, and use wordpressapi's clear:both; suggestion to force the footer down. Sometimes the solution's way too simple :)

Here is my (hideously coloured) example:

<html>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;background:#000;">
<div id="wrap" style="width:1005px;margin:0 auto;background:#003">
  <div id="header" style="height:280px;width:100%;background:#C9C;"></div>
  <div id="sidebarwrap" style="width:330px;height:100%;background:#09F;float:right;margin:0 42px 0 0;opacity:0.9;">
    <ul id="sidebar"><li style="height:1250px;"></li></ul></div>
  <div id="title" style="width:100%;height:122px;background:#C3C;"></div>
  <div id="thecontent" style="width:550px;background:#909;margin:0 0 0 42px;"></div><br /><br /><br /><br />
  <div id="title" style="width:100%;height:122px;background:#C3C;"></div><br /><br /><br /><br />
  <div id="title" style="width:100%;height:122px;background:#C3C;"></div><br /><br /><br /><br />
  <div id="title" style="width:100%;height:122px;background:#C3C;"></div><br /><br /><br /><br />
  <div id="footer" style="width:100%;height:400px;background:#90C;clear:both;position:relative;"></div>
</div>
</body>
</html>

askon 2010-03-05 21:55:46

ansaurus

tags:

views:

answers:

Overlapping divs, absolutely relative?

related questions