On 2/01/2014 2:54 AM, John wrote:
On Jan 1, 2014, at 3:43 AM, Alan Gresley <[email protected]> wrote:
Thank you for shedding light Alan..as soon as I read your
corrections, I realized that I hadn’t removed floats (d’oh!) but had
no idea bout the margin % becoming part of the width of the float…
What is the *available width*? Please see section 10.3.5 of CSS2.1 [1]:
| Thirdly, find the available width: in this case, this
| is the width of the containing block minus the used
| values of 'margin-left', 'border-left-width',
| 'padding-left', 'padding-right', 'border-right-width',
| 'margin-right', and the widths of any relevant scroll
| bars.
The width of the float was 100% of the containing block (being the
initial containing block (the root element which is also be considered
the veiwport).
You had this. To the left is hidden overflow (HO) for a floated right
element.
HO | ------- containing block ------- |
| --------- float 100% --------- | +3% |
When you use percentage margins, they become part of the width of
the float (margin box). If the float is floating right, only the
margin-right has any effect. The margin-left is eaten by the hidden
overflow (outside the viewport on the left).
Why so? I thought it was Padding that added to width, ie, if:
padding-right:10px, subtract 10px from width to maintain overall
width (that the eye sees). Isn’t margin the value that *moves* the
entire div?
Please see above where I write "float (margin box)". Also section 10.3.3
of Block-level, non-replaced elements in normal flow [2]:
| 'margin-left' + 'border-left-width' + 'padding-left' +
| 'width' + 'padding-right' + 'border-right-width' +
| 'margin-right' = width of containing block
| If all of the above have a computed value other than
| 'auto', the values are said to be "over-constrained"
| and one of the used values will have to be different
| from its computed value.
When you use percentages for 'block-level, non-replaced elements in
normal flow' or 'floating, non-replaced elements', all the percentages
are based on the width of the containing block.
Test the following examples of markup and CSS.
<style type="text/css">
html { background: white; }
body { background: skyblue; }
div {
background: pink;
width: 100%;
margin: auto 50%;
padding: auto 50%;
}
div div { background: lime; }
</style>
<div><div>Inner div</div></div>
or
<style type="text/css">
html { background: white; }
body { background: skyblue; }
div {
float: left;
background: pink;
width: 100%;
margin: auto 50%;
padding: auto 50%;
}
div div { background: lime; }
</style>
<div><div>Inner div</div></div>
This margin-right: 3% is the percentage that the float is
overflowing the viewport into hidden overflow. Remove the float for
the <aside> and change these following values.
aside{ width:100%; float: none; /* ADD */ margin: 8% auto 0 3%; /*
CHANGE */ border: 1px solid white; }
Even this approach will bring unexpected results.
Why so? What about this will be unexpected?
John
Because you are going to have overflow of the containing block. You want
the following to add up to 100%.
| 'margin-left' + 'border-left-width' + 'padding-left' +
| 'width' + 'padding-right' + 'border-right-width' +
| 'margin-right' = width of containing block
1. http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#float-width
2.
http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#Computing_widths_and_margins
Alan
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
______________________________________________________________________
css-discuss [[email protected]]
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/
