CSS: Making absolute block content relative

Posted on

In CSS, a block of content marked as position: relative is moved to it`s new relative location after the content is rendered (but before it is displayed). This means that area that would have been filled with the block maintains it`s size, but is empty. This is explained here.

However, you sometimes don’t want this behaiviour. You want the gap to close up. If you use absolute positioning, then this fixes the problem and the content is moved absolutely, the gap that would have been left in the page is used by other content and everybody is happy.

Except, what if your layout does not permit the use of position:absolute ? For example, you`re using margin-left:auto and margin-right:auto to align your content centrally. After much unsuccessful googling, I started looking on the CSS Zen garden site for layouts that might have the same problem, and I found this one. Looking though the code I spotted this gem

.#quickSummary { position:absolute; margin-top:90px; margin-left:322px; height:90px; width:260px;}

So it turns out to be a simple solution. Use position: absolute but don`t give a top/bottom/left/right position. The absolute position is determined by the margins, which end up being relative. I suspect it won`t work overly well without at least a size of some kind, but in my code I only provided a width and it appears to work in the limited testing I’ve done on firefox (linux and windows) and IE 5.5

Just thought that that might be useful to someone. It took me long enough to find.