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 12 of 12
  1. #1
    New Coder bigtiger's Avatar
    Join Date
    Oct 2005
    Posts
    98
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Issue with using float property ?

    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,
    Last edited by bigtiger; 05-16-2007 at 05:43 AM.

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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?
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #3
    New Coder bigtiger's Avatar
    Join Date
    Oct 2005
    Posts
    98
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by bigtiger View Post
    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
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    New Coder bigtiger's Avatar
    Join Date
    Oct 2005
    Posts
    98
    Thanks
    0
    Thanked 0 Times in 0 Posts
    inline boxes are drawn above a float
    1.) Take this code for instance

    Code:
    <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.
    Last edited by bigtiger; 05-16-2007 at 07:43 PM.

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by bigtiger View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    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 Arbitrator View Post
    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.
    Code:
    <!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>

  • #8
    New Coder bigtiger's Avatar
    Join Date
    Oct 2005
    Posts
    98
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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,

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by koyama View Post
    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 where floats are too low.

    Quote Originally Posted by koyama View Post
    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, 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 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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #10
    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 Arbitrator View Post
    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.

    Quote Originally Posted by Arbitrator View Post
    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!

    Quote Originally Posted by Arbitrator View Post
    Comparing your example with Example 4 in this example, 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.

    Quote Originally Posted by Arbitrator View Post
    You might check out the current 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.

  • #11
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by koyama View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #12
    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 Arbitrator View Post
    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.


  •  

    Posting Permissions

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