Re: [css-d] controlling aside for mobile
On Jan 1, 2014, at 8:47 PM, Alan Gresley a...@css-class.com wrote: 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 Thank you, Alan..there’s a lot of meat there. John __ 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] controlling aside for mobile
On 1/01/2014 8:27 AM, John wrote:
At this link: http://www.thinkplan.org/ I can’t see why I can’t
control over the L-R positioning of my aside
for the most part, my max-width=480px media break css are
working..I’m thinking this aside issue is some dumb thing but I’m not
seeing it.
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).
The width of the float is as follows:
width: 100% + margin-right: 3%
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.
one weird thing, when I comment out my footer, the color I’ve
assigned to the wrapper for 480 reverts to the desktop color! I’m
hunting for things that are making the page “think” it’s still
desktop width..
This is because the floats further up the page are no longer being
cleared. You have clear: both on the footer.
Thanks for any pointers!
John
Alan
--
Alan Gresley
http://css-3d.org/
http://css-class.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] controlling aside for mobile
On Jan 1, 2014, at 3:43 AM, Alan Gresley a...@css-class.com 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…
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?
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
__
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] controlling aside for mobile
On 2/01/2014 2:54 AM, John wrote:
On Jan 1, 2014, at 3:43 AM, Alan Gresley a...@css-class.com 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
divdivInner 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
divdivInner 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 [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] controlling aside for mobile
At this link: http://www.thinkplan.org/ I can’t see why I can’t control over the L-R positioning of my aside for the most part, my max-width=480px media break css are working..I’m thinking this aside issue is some dumb thing but I’m not seeing it. one weird thing, when I comment out my footer, the color I’ve assigned to the wrapper for 480 reverts to the desktop color! I’m hunting for things that are making the page “think” it’s still desktop width.. Thanks for any pointers! John __ 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/
