...

View Full Version : Issue with using float property ?



bigtiger
05-16-2007, 05:34 AM
Hi, I got a little issue when learning css.

When I have spend few hours to get understand how the property float works.
(Reading the www.w3school.com tutorial)


But get confused with this text :

Content, background, and borders of inline elements should go in front of the float. Background and borders of a block element should go behind the float, but the content of the block element should go in front of the float.

Hmm... how can I understand this part `should go in front of the float`

Thanks,

ahallicks
05-16-2007, 09:10 AM
i.e: I think it's saying that when you float an element the background and border are technically behind the float and all content placed on the page is actually on top of the float. I don't know, it's hard to describe. I was thinking something about the fact that you float in the CSS where you would also describe the border and background colour. Then in the HTML you wopuld describe your content that is place ON TOP of the floated element.

Meh?

bigtiger
05-16-2007, 11:50 AM
Ahallicks, thanks your help, you are correct. It is hard to said.
I have googled around and discovered that the float property is much more complex than I was thinking.

So, it should be best leave it to the lastest of my css learning stage.

Here is a sample then you knowed what I said and there are total in 9.
Posting a few of it.

1.) The left (or right) outer edge of a floated element may not be to the left (or right) of the inner edge of its containing block.


2.) The left (or right) outer edge of a floated element must be to the right (or left) of the right (left) outer edge of a left-floating (or right-floating) element that occurs earlier in the document's source, unless the top of the later element is below the bottom of the former.

3.) The right outer edge of a left-floating element may not be to the right of the left outer edge of any right-floating element to its right. The left outer edge of a right-floating element may not be to the left of the right outer edge of any left-floating element to its left.

... and more.

Arbitrator
05-16-2007, 02:27 PM
Content, background, and borders of inline elements should go in front of the float. Background and borders of a block element should go behind the float, but the content of the block element should go in front of the float.

Hmm... how can I understand this part `should go in front of the float`The quoted statement basically says that inline boxes are drawn above a float, but their block level containers will be drawn behind the float. Normally, floats will never overlap text; however, you can arrive in such a situation when you use negative margins on a float.

Live Example: http://www.jsgp.us/demos/CF114285.html

bigtiger
05-16-2007, 04:09 PM
inline boxes are drawn above a float

1.) Take this code for instance


<div style="width:100%;float:left">
<div style="background-color: purple;color:white;padding:2px">
<div style="float:right">[+]</div>
<span>Menu name .............. .................................................................................................... ......................................................long name</span>
</div>
<span>here is some other long text for example</span>
</div>

as you will see, the <span>Menu name... will not placed above the div [+] , just in front of ( the left side of div) So, this is made me unclear that will float in front of block element.

Arbitrator
05-16-2007, 04:21 PM
1.) Take this code for instance

<div style="width:100%;float:left">
<div style="background-color:purple;color:white;padding:2px">
<div style="float:right">[+]</div>
<span>Menu name .............. .................................................................................................... ......................................................long name</span>
</div>
<span>here is some other long text for example</span>
</div>

as you will see, the <span>Menu name... will not placed above the div [+] , just in front of ( the left side of div) So, this is made me unclear that will float in front of block element.I’m not sure what you’re getting at. In your example, the float and the text never overlap, so the statement doesn’t apply.

koyama
05-16-2007, 07:31 PM
Live Example: http://www.jsgp.us/demos/CF114285.html
Nice example, Arbitrator. This answers the OP's question.

Not related to the OP's question, but you also mention that browsers position the floats differently.

In your example, you may notice that Firefox positions the float higher up if you add the style body {padding-top: 1px}. This may seem weird, but has to do with margin collapsing. I put together this example to illustrate the problem. Please copy and paste into a file and test.

At the moment, I am not even sure which of the browsers Firefox 2, Opera 9, or IE6/7 is rendering correctly. There may even be some degree of freedom within CSS as how to render.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-Latn-US">
<head>
<title>Demo 2, CF114285</title>
<style type="text/css">
html { background: white; color: black; font: 16px/1.2 sans-serif; }
body { margin: 15px 15px 300px 15px; }
dl { border: 1px solid black; padding: 1em; }
dt { font-weight: bold; }

/* styles for illustrating the example */
.yellow {
margin-top: 5em;
background: yellow;
}
.a_float {
width: 100px;
background: lightblue;
border: 5px solid blue;
float: left;
}
#pink_ex1 {
background: pink;
border-left: 5px solid purple;
border-right: 5px solid purple;
border-bottom: 5px solid purple;
width: 400px;
padding: 0 5px 5px 5px;
}
#pink_ex2 {
background: pink;
border-top: 5px solid purple;
border-left: 5px solid purple;
border-right: 5px solid purple;
border-bottom: 5px solid purple;
padding: 5px;
width: 400px;
}
</style>
</head>
<body>
<h1>Margin collapsing in case: non-floated block > (float + non-floated block)</h1>
<p>In both examples below, the yellow div has a top margin of 5em. It is nested within the pink div with purple border.</p>
<p>We now want to see how margin collapsing is treated in browsers in presence of floats before the yellow div, but still within the pink div.</p>
<p>In the first example, conditions are in place for margin collapsing between the yellow div and the pink div.</p>
<p>In the second example, we have given the pink div a border-top and padding-top top prevent margin collapsing between the yellow div and the pink div.</p>

<h2>Example 1: The purple div has no top border and no top padding</h2>
<dl>
<dt>Rendering:</dt>
<dd>In Firefox 2 Floats are 'pulled down' to the red div. Is this a violation of CSS 2.1 ?</dd>
<dd>In Opera 9: Floats are rendered outside the pink div. Is this a violation of CSS 2.1 ?</dd>
<dd>In IE6/7: Margin collapsing fails. Is this a violation of CSS 2.1 ?</dd>
</dl>
<div id="pink_ex1">
<div class="a_float">This is a float</div>
<div class="a_float">This is a float</div>
<div class="yellow">Eademque
ratione ne temperantiam quidem propter se expetendam esse dicemus, sed
quia pacem animis afferat et eos quasi concordia quadam placet ac
leniat. temperantia est enim, quae in rebus aut expetendis aut
fugiendis ut rationem sequamur monet. nec enim satis est iudicare quid
faciendum non faciendumve sit, sed stare etiam oportet in eo, quod sit
iudicatum. plerique autem, quod tenere atque servare id, quod ipsi
statuerunt.</div>
</div>
</div>

<h2>Example 2: The pink div has border-top: 5px solid purple; padding-top: 5px</h2>
<dl>
<dt>Rendering:</dt>
<dd>Firefox 2, Opera 9, IE6/7 render in the same way</dd>
</dl>
<div id="pink_ex2">
<div class="a_float">This is a float</div>
<div class="a_float">This is a float</div>
<div class="yellow">Eademque
ratione ne temperantiam quidem propter se expetendam esse dicemus, sed
quia pacem animis afferat et eos quasi concordia quadam placet ac
leniat. temperantia est enim, quae in rebus aut expetendis aut
fugiendis ut rationem sequamur monet. nec enim satis est iudicare quid
faciendum non faciendumve sit, sed stare etiam oportet in eo, quod sit
iudicatum. plerique autem, quod tenere atque servare id, quod ipsi
statuerunt.</div>
</div>
</div>
</body>
</html>

bigtiger
05-16-2007, 10:22 PM
Sorry, late reply. :(

Thanks, I will try it soon. And the example from Arbitrator is good.
It demo much thing including the browser's ablity.

And also, I'am learning the writing of css from www.w3school.com.
It is up to CSS Positioning now. Is there any more good tutorial
and example ?

Thanks,

Arbitrator
05-17-2007, 04:26 PM
Not related to the OP's question, but you also mention that browsers position the floats differently.

In your example, you may notice that Firefox positions the float higher up if you add the style body {padding-top: 1px}. This may seem weird, but has to do with margin collapsing. I put together this example to illustrate the problem. Please copy and paste into a file and test.Hmm… Taking your example into account, Firefox may be correct. Since the floated div in my example is not in the normal flow, the margin would collapse through it to the top of the body element. Then the float should start 1 em down from the top instead of at the top. Given that, I would have to say that Firefox is right… I seemed to have assumed that Firefox was wrong here due to another bug (https://bugzilla.mozilla.org/show_bug.cgi?id=50630) where floats are too low.


At the moment, I am not even sure which of the browsers Firefox 2, Opera 9, or IE6/7 is rendering correctly. There may even be some degree of freedom within CSS as how to render.I looked through the spec and don’t see how any of the renderings for your example could be correct except for Firefox’s. Opera’s rendering doesn’t seem to make sense since the float has escaped its parent element without the intervention of negative margins, positioning, or overflow.

Comparing your example with Example 4 in this example (http://www.hixie.ch/tests/adhoc/css/box/block/margin-collapse/microsoft/original.html), I would, again, conclude that Firefox’s rendering is correct. Firefox renders Example 4 incorrectly, but if you remove overflow: hidden from the green div, you can see how it’s comparable to your example. The renderings are comparable in the same way for both Internet Explorer and Opera.

You might check out the current (http://www.hixie.ch/tests/adhoc/css/box/block/margin-collapse/microsoft/) and parent directory for the example that I just referenced above. The Web site is that of one of the editors of the CSS2.1 spec.

koyama
05-17-2007, 06:22 PM
Hmm… Taking your example into account, Firefox may be correct. Since the floated div in my example is not in the normal flow, the margin would collapse through it to the top of the body element. Then the float should start 1 em down from the top instead of at the top. Given that, I would have to say that Firefox is right…
I agree with this. Firefox must be correct. The tricky part is to realize that the top border edge of the body element (although it has no border) resides 1em from the top of the viewport in your example. To see this, one may apply body {outline: 1px solid red}. Trying to set body {border: 1px solid red} won't work because this prevents margin collapsing.



I looked through the spec and don’t see how any of the renderings for your example could be correct except for Firefox’s. Opera’s rendering doesn’t seem to make sense since the float has escaped its parent element without the intervention of negative margins, positioning, or overflow.

yeah, I think you're right. Opera's rendering must be wrong. The float shouldn't be able to drift upwards out of its containing block!



Comparing your example with Example 4 in this example (http://www.hixie.ch/tests/adhoc/css/box/block/margin-collapse/microsoft/original.html), I would, again, conclude that Firefox’s rendering is correct. Firefox renders Example 4 incorrectly, but if you remove overflow: hidden from the green div, you can see how it’s comparable to your example. The renderings are comparable in the same way for both Internet Explorer and Opera.

Thanks for showing me that page with examples. Indeed Example 4 is similar. Maybe I should check out the other examples too. Browsers seem to be rather poor at rendering those examples correctly. Even Firefox seems to have issues. I'm not even sure why Firefox's rendering of Example 4 with the overflow: hidden statement is incorrect. But that would be another discussion.



You might check out the current (http://www.hixie.ch/tests/adhoc/css/box/block/margin-collapse/microsoft/) and parent directory for the example that I just referenced above. The Web site is that of one of the editors of the CSS2.1 spec.

That should guarantee authority. Already bookmarked. Many thanks for your valuable input.

Arbitrator
05-17-2007, 10:19 PM
I'm not even sure why Firefox's rendering of Example 4 with the overflow: hidden statement is incorrect. But that would be another discussion.The green div elements have an explicit width of 140 pixels. Because the overflow: hidden declaration causes the green div to establish a new block formatting context, the red float can’t overlap it. At that point, the green div no longer fits on the line because of its explicit width, so it should wrap. However, Firefox is ignoring the explicit width and shrinking the green element to fit on the same line as the red float.

koyama
05-18-2007, 01:25 PM
The green div elements have an explicit width of 140 pixels. Because the overflow: hidden declaration causes the green div to establish a new block formatting context, the red float can’t overlap it. At that point, the green div no longer fits on the line because of its explicit width, so it should wrap. However, Firefox is ignoring the explicit width and shrinking the green element to fit on the same line as the red float.
Ahh... I see. I had missed that the elements had explicitly set widths. What you are saying makes sense. I thought that it was being questioned whether overflow: hidden should cause the displacement to the right of the left edge of the green box or not. That was not the case. Thanks again for your explanation.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum