Re: [css-d] help on understanding a float behavior with a % margin
On Jun 7, 2012, at 8:46 , Philippe Wittenbergh wrote: > > Le 7 juin 2012 à 06:23, mem a écrit : > >> So, perhaps this is what I'm not getting: >> >> if we float an element to the right, for example, but we give it a width of >> 100% what will that float: right visually accomplish ? > > Nothing,… maybe ? No, not really nothing. Floating elements has lots of > implications (not only for the element itself, but for the flow of the > document). > > Floating that element might have implications for how the content > (descendants) of that element affect the element itself. Floating the element > also affects margin-collapsing. It will affect how subsequent block elements > behave. > > For example, floating the element establishes a block formatting context > (css2.1:9.4.1) - as such it will contain floated descendants. > > -- > Philippe Wittenbergh > http://l-c-n.com I will note that. When the time comes, I will properly read and study the replies provided and other that may follow. note: That reply was intended to leave yesterday (prior to Georg reply), but it got stuck on "outbox" box for some reason. Regards, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help on understanding a float behavior with a % margin
Le 7 juin 2012 à 06:23, mem a écrit : > So, perhaps this is what I'm not getting: > > if we float an element to the right, for example, but we give it a width of > 100% what will that float: right visually accomplish ? Nothing,… maybe ? No, not really nothing. Floating elements has lots of implications (not only for the element itself, but for the flow of the document). Floating that element might have implications for how the content (descendants) of that element affect the element itself. Floating the element also affects margin-collapsing. It will affect how subsequent block elements behave. For example, floating the element establishes a block formatting context (css2.1:9.4.1) - as such it will contain floated descendants. -- Philippe Wittenbergh http://l-c-n.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help on understanding a float behavior with a % margin
On 06.06.2012 20:51, mem wrote: On Jun 6, 2012, at 18:02 , Georg wrote: On 06.06.2012 18:16, mem wrote: Can you please take a look on the following snipped and either edited and/or explain here, why, when we add a *percentage* value on margin, we get some li to drop the float ? http://jsfiddle.net/vNmjS/ Question: how wide is the float? :-) I believe it is, as wide as their contents. And that should be X% wide. But not 100% wide, unless, their contents correspond to the totality of the container. I still not get with if we do px or em it don't drop, and if we use % it drops... In my experience with floats the problem lies in what the percentage-value for those margins gets calculated of - the width of the container, the float itself. As floats, as Tom correctly says, shrink to the width of their content when no width is declared, we get a kind of a circular calculation of percentage used on its children, ending up with a container that is slightly too narrow. That's not the case with px and em, as values using such units are not calculated from container's dimensions, so they are "fixed" in advance for calculating the float's width. A more normal way to do this, is to declare... div#container { float: right; /* or 'left' */ text-align: right; width: 100%; } ...which provides enough space in most cases. The ul itself will of course work fine as only container, with a similar styling. I see that we float right an element of 100% width. That seems to take no effect on their contained elements, it only takes effect when we text-align: right the inline or text elements inside. Indeed it works but I still don't totally understand the solution. Why should we declare a width of 100% will it not normally taken as 100% by default ? Please discard all nonsense that I may be saying here. No nonsense found in your writing, your questions make sense. Once you master 'floats' you can introduce magic in web design :-) Float-styling on a container has no effect on children - isn't inherited in any way. Float-styling only affect the flow of content/elements that follow a floating element. The only reason to float a container in some cases, is that floats contain (wrap around) both their floating and non-floating children. That would have been useful if you had floated those list-items to line them up. Such a 'float' container must be given a width to prevent it from shrinking, and 100% of the float's own container - whatever that container is - is quite often the most logical value. A 100% wide float-container prevents following content/elements from flowing up on its side(s), which is how we want it in most cases. Since all children are styled to be 'inline' in your example, containment is not an issue. Thus, simply using the 'ul' as block-container with text-align: left/right/center would produce a 3-items "menu". And, a 'display: block' styled element do expand to full width of _its_ container. Typically, the following basic styling... ul {padding: .1em 0; margin: 0; text-align: right; } ul li {display: inline-block; margin: nnxx; padding: nnxx; } /* whatever values/units you want on margins/padding to space list-items */ ...is a way to start styling a list for the rendering in your example, and 'float' styling isn't necessary. regards Georg __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help on understanding a float behavior with a % margin
On Jun 6, 2012, at 20:55 , Tom Livingston wrote: > On Wed, Jun 6, 2012 at 2:51 PM, mem wrote: >> On Jun 6, 2012, at 18:02 , Georg wrote: >> >>> On 06.06.2012 18:16, mem wrote: Can you please take a look on the following snipped and either edited and/or explain here, why, when we add a *percentage* value on margin, we get some li to drop the float ? http://jsfiddle.net/vNmjS/ >>> >>> Question: how wide is the float? :-) >> >> I believe it is, as wide as their contents. >> And that should be X% wide. >> But not 100% wide, unless, their contents correspond to the totality of the >> container. >> >> I still not get with if we do px or em it don't drop, and if we use % it >> drops... >> >> >>> >>> A more normal way to do this, is to declare... >>> >>> div#container { >>> float: right; /* or 'left' */ >>> text-align: right; >>> width: 100%; >>> } >>> >>> ...which provides enough space in most cases. The ul itself will of course >>> work fine as only container, with a similar styling. >> >> I see that we float right an element of 100% width. That seems to take no >> effect on their contained elements, it only takes effect when we text-align: >> right the inline or text elements inside. >> Indeed it works but I still don't totally understand the solution. >> >> Why should we declare a width of 100% will it not normally taken as 100% by >> default ? > > Floating an element causes it to constrict to the width of it's contents, no? Yes. You are right. So, perhaps this is what I'm not getting: if we float an element to the right, for example, but we give it a width of 100% what will that float: right visually accomplish ? __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help on understanding a float behavior with a % margin
On Wed, Jun 6, 2012 at 2:51 PM, mem wrote: > On Jun 6, 2012, at 18:02 , Georg wrote: > >> On 06.06.2012 18:16, mem wrote: >>> Can you please take a look on the following snipped and either edited >>> and/or explain here, why, when we add a *percentage* value on margin, we >>> get some li to drop the float ? >>> >>> http://jsfiddle.net/vNmjS/ >> >> Question: how wide is the float? :-) > > I believe it is, as wide as their contents. > And that should be X% wide. > But not 100% wide, unless, their contents correspond to the totality of the > container. > > I still not get with if we do px or em it don't drop, and if we use % it > drops... > > >> >> A more normal way to do this, is to declare... >> >> div#container { >> float: right; /* or 'left' */ >> text-align: right; >> width: 100%; >> } >> >> ...which provides enough space in most cases. The ul itself will of course >> work fine as only container, with a similar styling. > > I see that we float right an element of 100% width. That seems to take no > effect on their contained elements, it only takes effect when we text-align: > right the inline or text elements inside. > Indeed it works but I still don't totally understand the solution. > > Why should we declare a width of 100% will it not normally taken as 100% by > default ? Floating an element causes it to constrict to the width of it's contents, no? -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help on understanding a float behavior with a % margin
On Jun 6, 2012, at 18:02 , Georg wrote: > On 06.06.2012 18:16, mem wrote: >> Can you please take a look on the following snipped and either edited and/or >> explain here, why, when we add a *percentage* value on margin, we get some >> li to drop the float ? >> >> http://jsfiddle.net/vNmjS/ > > Question: how wide is the float? :-) I believe it is, as wide as their contents. And that should be X% wide. But not 100% wide, unless, their contents correspond to the totality of the container. I still not get with if we do px or em it don't drop, and if we use % it drops... > > A more normal way to do this, is to declare... > > div#container { > float: right; /* or 'left' */ > text-align: right; > width: 100%; > } > > ...which provides enough space in most cases. The ul itself will of course > work fine as only container, with a similar styling. I see that we float right an element of 100% width. That seems to take no effect on their contained elements, it only takes effect when we text-align: right the inline or text elements inside. Indeed it works but I still don't totally understand the solution. Why should we declare a width of 100% will it not normally taken as 100% by default ? Please discard all nonsense that I may be saying here. > > regards >Georg Thanks a lot, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help on understanding a float behavior with a % margin
On 06.06.2012 18:16, mem wrote: Can you please take a look on the following snipped and either edited and/or explain here, why, when we add a *percentage* value on margin, we get some li to drop the float ? http://jsfiddle.net/vNmjS/ Question: how wide is the float? :-) A more normal way to do this, is to declare... div#container { float: right; /* or 'left' */ text-align: right; width: 100%; } ...which provides enough space in most cases. The ul itself will of course work fine as only container, with a similar styling. regards Georg __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] help on understanding a float behavior with a % margin
Hello all, Can you please take a look on the following snipped and either edited and/or explain here, why, when we add a *percentage* value on margin, we get some li to drop the float ? http://jsfiddle.net/vNmjS/ k. regards, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/