#APdiv

position: absolute

This div is positioned absolutely with the bottom and right CSS properties set to 0. Therefore it appears in the bottom-right corner of the screen and is displayed over the other content.

In the code, this div is within the #container div. Therefore, we can position it in the bottom-right corner of #container by applying the position:relative property to that div by clicking the button below.


To see the "natural" position of this div set its CSS position property to static (the default for all divs) using the button below.

DWcourse Logo#container

The bold outline represents the #container div. It holds all divs (except the fixed position div above) on this page.

#sidebar1

float:left

The #sidebar1 div is floated left. It appears before the mainContent div in the code.

It is positioned within its parent div (#container) but has no effect on the height of the parent div. Therefore it can overrun the borders of its parent div.

A floated object forces the content of its parent to wrap around it.

Note: A floated object must have the CSS width property set.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

order-button

Additional content added to force page scrolling and display floated object overflowing its parent div.

#sidebar2

float:right

The #sidebar2 div is floated right. It also appears before the mainContent div in the code of the page.

It is positioned relative to its parent div (#container) but has no effect on the height of the parent div. Therefore the floated div can overrun the borders of its parent div.

A floated object forces the content of its parent to wrap around it.

#mainContent

In the code the #mainContent div appears after both sidebar divs. The content of this div wraps around the sidebars which are floated left (#sidebar1) and right (.sidebar2).

Since both sidebars are floated, the height of the #container div is determined by the combined heights of the #header, #mainContent and #footer divs. Floated divs do not affect the height of their parent containers.