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 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/
[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/
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/
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 Wed, Jun 6, 2012 at 2:51 PM, mem talofo.l...@gmail.com 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 20:55 , Tom Livingston wrote:
On Wed, Jun 6, 2012 at 2:51 PM, mem talofo.l...@gmail.com 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 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/
