css clear: both;

[belindassy]

I am trying to put a footer on my webpage and the clear attribute does not appear to work as specified in the HTML Utopia book. As long as I do not define a position attribute the footer goes below any relative position blocks but not absolute.

Another attribute the z-index attribute does not appear to work either.

Please help!!!

[vgarcia]

When you specify that an element is absolutely, relatively, or fixed positioned (basically anything other than "static" which is the default type of positioning), you are removing that element from the "normal flow" of the document, since you are then telling the element where to be placed. In those cases, clearing won't have any effect, as adding clear to an element only affects those below it in the normal document flow.

[redux]

not to nitpick, but...

When you specify that an element is absolutely, relatively, or fixed positioned (basically anything other than "static" which is the default type of positioning), you are removing that element from the "normal flow" of the document

you're not removing it from the flow with relative...the place it "would" normally be is still left empty, so it still occupies space there...sort of...if you catch my drift

[belindassy]

Thank-you for your posts. As a newbie I am having difficulty understanding the "flow" of the document.
If the clear attribute (as you said) "affects those below it..." why is it used in the footer tag which is the last element on the page?

[Paul O'B]

Hi,

"clear" prevents an element from being displayed next to floated elements. clear:left means floated elements may not appear to the left of the element and clear:right means floated elements may not appear to the right of the element. clear:both means (as you'd expect) no floated elements either side.

The value of clear refers to floated elements that appear earlier in the document

Hope that makes sense.

Paul

[Paul O'B]

As a newbie I am having difficulty understanding the "flow"

If all your elements have no value set for the property position (other than the default of static) then they will all be in the normal flow of the document and appear in the same order as the code.

When you use absolute positioning the element is removed from the normal flow and placed exactly where you want it (within its parent container *). This means that the content already in the normal flow may be overwritten by the absolutely positioned element if you have not allowed for it.

A releatively positioned element moves an element some distance in relation to itself and the space that it would have occupied is preserved. However this may also result in content in the normal flow being overwritten.

Floated elements are removed from the flow but provisions are made to allow surrounding content to flow around the element (text around an image etc).

The clear property is used on an element that follows a float so that the float does not overwrite the element.

Hope this helps.

Paul

*Absolute elements can be placed absolutely from their parent container. The parent container is defined as the nearest ancestor that has a value for the property position other than static (default). Otherwise the point of reference is then the html element outside of the body margins.

[belindassy]

Your responses helped remove the confusion, thank-you.