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/
