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 [[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/
