Home/ Questions/Q 650691
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T22:04:50+00:00

A wordpress theme I’m working on has headlines which span across the entire content

  • 0

A wordpress theme I’m working on has headlines which span across the entire content area.

These headlines are overlapped by the sidebar which is absolutely positioned at 100% width.

The issue, is when the sidebar’s content exceeds the page’s content, it stretches OUT of my wrapper overtop of the footer without forcing the it down (because it’s absolute and nothing else is).

So my question is, how would it be possible to make a absolutely positioned div, become relative and essentially “push” my footer down, or is there a better way to do this?

Also, if anyone has examples of how this has been done would be awesome!

edit:

The sidebar is absolutely positioned so it can lay over top of the sidebar. I don’t have an online example as I’m doing doing a local server set-up, everything else is relatively position, and likely floated.

Image Example:

http://imagecheese.com/gallery/stackquest.png

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0