Float elements break block elemens - why?
in [CSS]
|
From: Axel Dahmen on 3 Mar 2010 12:35 Hi, in the current CSS 2.1 specification regarding floats I believe to have found a flaw (please correct me if I'm wrong): Only the content block of Block elements is shifted to be aside of the float, not the margin or border edges. Please refer to the code below for an example. Given this example, it seems impossible to keep visual styles like heading background colours displayed appropriate. Is there an error in the style sheet below? I can't see one.... Or is this a known problem? Something hat should be reported to the CSS mailing list? Or has this already been addressed in CSS 3? Axel Dahmen ----------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <style type="text/css"> #floating {float:left; width: 5em; background-color: transparent; } #noFloating {clear: left; } p {background-color: #ddd; border: 1px solid grey; margin: 1em; } </style> </head> <body> <div><p>This div is on top the floating div.</p></div> <div id="floating">This div is floating to the left.</div> <div><p>This div is right next to the floating div.</p></div> <div id="noFloating"><p>This div is below the floating div.</p></div> </body> </html>
From: Ben C on 3 Mar 2010 16:01 On 2010-03-03, Axel Dahmen <KeenToKnow(a)newsgroup.nospam> wrote: > Hi, > > in the current CSS 2.1 specification regarding floats I believe to have > found a flaw (please correct me if I'm wrong): > > Only the content block of Block elements is shifted to be aside of the > float, not the margin or border edges. More precisely, it's the inline boxes that flow around the float. > Please refer to the code below for an example. > > Given this example, it seems impossible to keep visual styles like heading > background colours displayed appropriate. You can make the second div-- the one "right next to the floating div"-- a "block-formatting context root" (BFC) by making it overflow: hidden. That way its border box won't intersect the float, and all browsers I've tried will make it narrower to achieve this (as the spec suggests, although it does say they can move it down instead if they like). > Is there an error in the style sheet below? I can't see one.... Or is > this a known problem? It's not usually considered a problem. You're right that if there is a problem here, it's with the spec, not with your example. But what would you suggest should be the behaviour instead? Treating all blocks the way BFCs are treated would be undesirable for cases like a series of paragraphs with borders containing occasional floats. > Something hat should be reported to the CSS mailing list? Or has this > already been addressed in CSS 3? You name it they've probably discussed it. It might be a good idea for them to make the rule that BFCs get narrower to avoid intersecting floats a bit more hard-and-fast rather than just saying "may". > Axel Dahmen > > > ----------------------------------- ><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" > "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> ><html xmlns="http://www.w3.org/1999/xhtml"> ><head> > <title>Test</title> > <style type="text/css"> > > #floating > {float:left; > width: 5em; > background-color: transparent; > } > > #noFloating > {clear: left; > } > > p > {background-color: #ddd; > border: 1px solid grey; > margin: 1em; > } > > </style> ></head> ><body> > <div><p>This div is on top the floating div.</p></div> > > <div id="floating">This div is floating to the left.</div> > > <div><p>This div is right next to the floating div.</p></div> > > <div id="noFloating"><p>This div is below the floating div.</p></div> ></body> ></html> > >
From: dorayme on 3 Mar 2010 16:11 In article <hmm6kc$kdk$1(a)online.de>, "Axel Dahmen" <KeenToKnow(a)newsgroup.nospam> wrote: > Hi, > > in the current CSS 2.1 specification regarding floats I believe to have > found a flaw (please correct me if I'm wrong): > > Only the content block of Block elements is shifted to be aside of the > float, not the margin or border edges. <http://www.w3.org/TR/CSS21/visuren.html#float-rules> 9.5.1 left The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property). > > Please refer to the code below for an example. > > Given this example, it seems impossible to keep visual styles like heading > background colours displayed appropriate. > I don't see why not. What do you actually want to do? If you want a heading with all its borders and background shifted, just margin left the non floating heading. Take a look at this: <http://dorayme.netweaver.com.au/float768.html> -- dorayme
From: dorayme on 3 Mar 2010 19:18 In article <doraymeRidThis-34D6F0.08111604032010(a)news.albasani.net>, dorayme <doraymeRidThis(a)optusnet.com.au> wrote: > <http://dorayme.netweaver.com.au/float768.html> If the widths of the elements are something hard to know in advance, or if you use pixels for widths mixed in with ems, then Ben's idea (making the non-float a BFC) saves you from having to calculate anything much. -- dorayme
From: Axel Dahmen on 6 Mar 2010 14:28
Thanks Ben, and also thanks to you, dorayme, for your example. I see... However, although this looks like a solution, I don't see/understand a reasonable connection between a float and overflow. I can't even find one in the specs. Did I just not see something appropriate? I have this feeling in my guts that this solution is more a coincidence than intended... Would you mind, elaborating more on the intended connection between a float and overflow? Yours, Axel Dahmen ------------------------- "Ben C" <spamspam(a)spam.eggs> schrieb im Newsbeitrag news:slrnhotjdp.3j0.spamspam(a)bowser.marioworld... > On 2010-03-03, Axel Dahmen <KeenToKnow(a)newsgroup.nospam> wrote: >> Hi, >> >> in the current CSS 2.1 specification regarding floats I believe to have >> found a flaw (please correct me if I'm wrong): >> >> Only the content block of Block elements is shifted to be aside of the >> float, not the margin or border edges. > > More precisely, it's the inline boxes that flow around the float. > >> Please refer to the code below for an example. >> >> Given this example, it seems impossible to keep visual styles like >> heading >> background colours displayed appropriate. > > You can make the second div-- the one "right next to the floating div"-- > a "block-formatting context root" (BFC) by making it overflow: hidden. > That way its border box won't intersect the float, and all browsers I've > tried will make it narrower to achieve this (as the spec suggests, > although it does say they can move it down instead if they like). > >> Is there an error in the style sheet below? I can't see one.... Or is >> this a known problem? > > It's not usually considered a problem. You're right that if there is a > problem here, it's with the spec, not with your example. > > But what would you suggest should be the behaviour instead? Treating all > blocks the way BFCs are treated would be undesirable for cases like a > series of paragraphs with borders containing occasional floats. > >> Something hat should be reported to the CSS mailing list? Or has this >> already been addressed in CSS 3? > > You name it they've probably discussed it. > > It might be a good idea for them to make the rule that BFCs get narrower > to avoid intersecting floats a bit more hard-and-fast rather than just > saying "may". > >> Axel Dahmen >> >> >> ----------------------------------- >><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" >> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> >><html xmlns="http://www.w3.org/1999/xhtml"> >><head> >> <title>Test</title> >> <style type="text/css"> >> >> #floating >> {float:left; >> width: 5em; >> background-color: transparent; >> } >> >> #noFloating >> {clear: left; >> } >> >> p >> {background-color: #ddd; >> border: 1px solid grey; >> margin: 1em; >> } >> >> </style> >></head> >><body> >> <div><p>This div is on top the floating div.</p></div> >> >> <div id="floating">This div is floating to the left.</div> >> >> <div><p>This div is right next to the floating div.</p></div> >> >> <div id="noFloating"><p>This div is below the floating div.</p></div> >></body> >></html> >> >> |