...

View Full Version : Problem With Clear



mikeon
07-16-2007, 09:44 AM
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

VIPStephan
07-16-2007, 11:23 AM
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.

mikeon
07-16-2007, 01:07 PM
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.

mikeon
07-16-2007, 01:10 PM
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.

koyama
07-16-2007, 02:06 PM
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 (http://www.w3.org/TR/CSS21/visuren.html#propdef-clear) considers floats within the current block formatting context (http://www.w3.org/TR/CSS21/visuren.html#block-formatting) 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 (http://www.satzansatz.de/cssd/onhavinglayout.html) (e.g. using zoom: 1)

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.

mikeon
07-16-2007, 03:12 PM
I herby want to thank koyama for telling me about formatting contexts.

Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum