Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem With Clear

    Hello!

    I have a following html page:


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>New Product </title>
    </head>
    <body>
    <div style="float: left; height: 100px; width: 100px; background-color: Red">
    left
    </div>
    <div style="float: right; height: 150px; width: 100px; background-color: Blue;">
    right
    </div>
    <div style="position: relative">
    center
    <div style="clear: both">
    clear both</div>
    </div>
    </body>
    </html>


    Can someone explain to me, why clear both moves the content below both left and right floating elements? Mind you, that center div is position: relative.

    To make things stranger, if I change the center div to:

    <fieldset>
    center
    <div style="clear: both">
    clear both</div>
    </fieldset>

    It works as I would expect.
    --
    Michal

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,928
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Quote Originally Posted by mikeon View Post
    Can someone explain to me, why clear both moves the content below both left and right floating elements?
    Err… because you tell it to move below by setting clear: both?
    Your code works as it should in my Firefox. The word “center” is between the left and right floated elements and the cleared div is below the floated elements as is should be.

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Shouldn't it clear on elements inside a relative positioned div (there are none at present), rather than on the elements that are outside?

    Why changing center div to fieldset, changes the behavior of clear: both.

  • #4
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    To make it easier to see the problem I have prepared two pages:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

    transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>test</title>
    </head>
    <body>
    <div style="float: left; height: 100px; width: 100px; background-color: Red">
    left
    </div>
    <div style="float: right; height: 150px; width: 100px; background-color: Blue;">
    right
    </div>
    <div style="background-color: Silver;">
    center
    <div style="clear: both">
    clear both</div>
    </div>
    </body>
    </html>



    and



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

    transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>test</title>
    </head>
    <body>
    <div style="float: left; height: 100px; width: 100px; background-color: Red">
    left
    </div>
    <div style="float: right; height: 150px; width: 100px; background-color: Blue;">
    right
    </div>
    <fieldset style="background-color: Silver;">
    center
    <div style="clear: both">
    clear both</div>
    </fieldset>
    </body>
    </html>


    Please compare how they look like and answer me, why if possible.

  • #5
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by mikeon View Post
    Shouldn't it clear on elements inside a relative positioned div (there are none at present), rather than on the elements that are outside?
    The clear property considers floats within the current block formatting context for the element that the clear property is applied to. Note that it takes more than display: block to establish a new block formatting context. A new block formatting context can be established either by absolute positioning, setting overflow to be anything else that visible, or floating.

    Setting position: relative does not establish a new block formatting context which is why even floats outside that element are considered.

    This may be a problem in a 3-column liquid layout if the middle column does not establish a block formatting context. When clearing is applied to an element within the middle column then the clearing also considers the left and right column which is often not what one wants.

    The better 3-column liquid layout therefore uses 3 floated columns (this is possible!) or a middle column with overflow: hidden.

    Note that overflow: hidden does not establish a new block formatting context as it should in IE6. But you can emulate the correct behavior of overflow: hidden in IE6 by triggering hasLayout (e.g. using zoom: 1)
    Quote Originally Posted by mikeon View Post
    Why changing center div to fieldset, changes the behavior of clear: both.
    Apparently, the fieldset always establishes a new block formatting context. I am not sure why. I looked into the forms.css file used by Firefox which contains the default styles for form elements, but I didn't see any styling of the fieldset that should give it such an appearance. Possibly, the appearance of the fieldset in Firefox cannot be explained entirely by the browser styles, but I don't know. Maybe someone else knows.

  • #6
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I herby want to thank koyama for telling me about formatting contexts.

    Thanks!


  •  

    Posting Permissions

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