absolute positioning in relation to the containing block

Main Content

If the value of the position property is absolute, the containing block is the nearest positioned ancestor - in other words, the nearest ancestor whose position property has one of the values absolute, fixed, or relative.

By simply setting position:relative; on the parent that will establish the containing block for absolute positioned children. That allows them to position from the parent rather than positioning from the browser viewport.

This widthless div has overflow:hidden; applied to it to keep the background color from sliding under the floated sidebar. Floats are similar to AP elements as they are both removed from the document flow.

Increase your text size and you will see that this div will not push the AP bottom div down since it is removed from the normal document flow. To keep this text from overlapping the AP div you need to add bottom padding to this div.

Absolute Position #bottom div

Some sample filler text to fill the space.

Some sample filler text to fill the space.

Some sample filler text to fill the space.

Some sample filler text to fill the space.