position:absolute takes that element out of the document flow, so it doesn’t occupy any real “space”. Try making the .box a float as well, then clear it.
<div id="sidebar"> --sidebar stuff -- <div class="box"> --box stuff-- </div> <div style="clear:both;"></div> </div>
remove position and height from sidebar
remove position and bottom from box
Alternatively — and something I’ve not tried — you could test having .box positioned relatively instead of absolutely. Relative keeps it in the flow. The html would look like above without the clearing div. Keep position:relative in the #sidebar, so .box is positioned relative to #sidebar. Remove height from #sidebar, and change position:absolute to position:relative.
A quick way to test this is to use firefox and firebug. edit css and see how it looks without going back and forth from code to site.
- The topic ‘Sidebar “Footer” Bottom Alignment CSS Work-Around?’ is closed to new replies.