SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: css clear: both;

  1. #1
    SitePoint Member
    Join Date
    Jul 2003
    Location
    vermont
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question css clear: both;

    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!!!

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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.

  3. #3
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not to nitpick, but...
    Quote Originally Posted by 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
    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
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  4. #4
    SitePoint Member
    Join Date
    Jul 2003
    Location
    vermont
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    SitePoint Award Recipient Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    37,784
    Mentioned
    99 Post(s)
    Tagged
    3 Thread(s)
    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

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    SitePoint Award Recipient Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    37,784
    Mentioned
    99 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by belindassy
    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.

  7. #7
    SitePoint Member
    Join Date
    Jul 2003
    Location
    vermont
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your responses helped remove the confusion, thank-you.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •