Re: [css-d] why % not working for this?
Glad I could help. Best, Karl Sent from losPhone > On Sep 19, 2014, at 10:41 AM, John wrote: > > >> On Sep 18, 2014, at 9:42 PM, Karl DeSaulniers wrote: >> >> Hi John, >> Took a look at your code an here are a few suggestions I think might help. >> This is how I understand how to use percentages for width, padding and >> margin. > > ( much arithmetic from Karl! ) > > Thank you, Karl..that was excellent and very instructive…I realized after > reading your email that I’d spec’d 270px as a hard width, preventing those > thumbs from scaling…I just fixed that and gave them a max-width of 30% of the > “middle” width minus the 1.25em on either side and it works beautifully. > > 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/ __ 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] why % not working for this?
On Sep 18, 2014, at 9:42 PM, Karl DeSaulniers wrote: > Hi John, > Took a look at your code an here are a few suggestions I think might help. > This is how I understand how to use percentages for width, padding and margin. ( much arithmetic from Karl! ) Thank you, Karl..that was excellent and very instructive…I realized after reading your email that I’d spec’d 270px as a hard width, preventing those thumbs from scaling…I just fixed that and gave them a max-width of 30% of the “middle” width minus the 1.25em on either side and it works beautifully. 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] why % not working for this?
Glad to help! Chris Rockwell On Thu, Sep 18, 2014 at 5:00 PM, John wrote: > > On Sep 18, 2014, at 1:49 PM, Chris Rockwell > wrote: > > > Check out the "Computed" tab in Chrome Dev tools - it shows that > 47.87234% > > is equal to 430.844 pixels which, without actually doing the math, makes > > sense because your container is 900px wide. I'm pretty sure you're going > > to run into pixel rounding issues with percentages like that though ( > > http://ejohn.org/blog/sub-pixel-problems-in-css/). > > OK..a bit red-faced here..if I’d thought about it for a sec, that would > mean basically half the parent width, but in pixels it’s only 45px…which > would be… > > jeepers….4.7% not 47% I am going to try that value... > > thank you, Chris! > > J __ 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] why % not working for this?
On Sep 18, 2014, at 1:49 PM, Chris Rockwell wrote: > Check out the "Computed" tab in Chrome Dev tools - it shows that 47.87234% > is equal to 430.844 pixels which, without actually doing the math, makes > sense because your container is 900px wide. I'm pretty sure you're going > to run into pixel rounding issues with percentages like that though ( > http://ejohn.org/blog/sub-pixel-problems-in-css/). OK..a bit red-faced here..if I’d thought about it for a sec, that would mean basically half the parent width, but in pixels it’s only 45px…which would be… jeepers….4.7% not 47% I am going to try that value... thank you, Chris! J __ 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] why % not working for this?
Check out the "Computed" tab in Chrome Dev tools - it shows that 47.87234%
is equal to 430.844 pixels which, without actually doing the math, makes
sense because your container is 900px wide. I'm pretty sure you're going
to run into pixel rounding issues with percentages like that though (
http://ejohn.org/blog/sub-pixel-problems-in-css/).
Chris
Chris Rockwell
On Thu, Sep 18, 2014 at 4:38 PM, John wrote:
> http://www.coffeeonmars.com/170_su/client/portfolio/
>
> At this link, I have 3 thumbnails which display horizontally and are
> evenly distributed, and respect the 1.25em right and left padding of their
> parent.
>
> Using good ol’ pen and paper, I calced the total width of the elements,
> the padding of the parent, got my leftover space, and calculated that as a
> percentage of the parent, so my margin-right would be that % value.
>
> It didn’t work! I fiddled with fewer digits after the decimal, then began
> incrementing down, and it never did act right. But when I put in the “hard”
> value in ems, it worked!
>
> Why so? Why would % not work?
>
> the selector for the first two thumbnails is below…commented out the
> initial percent value. Thank you!
>
> .thumb-one-two{
> float:left;
> width:270px;
> /* margin-right:47.87234%; */
> margin-right:2.8125em;
> }
>
>
> thumb-three just has to have the correct width and float left:
>
> #thumb-three{
> float:left;
> width:270px;
> }
> __
> 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-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] why % not working for this?
http://www.coffeeonmars.com/170_su/client/portfolio/
At this link, I have 3 thumbnails which display horizontally and are evenly
distributed, and respect the 1.25em right and left padding of their parent.
Using good ol’ pen and paper, I calced the total width of the elements, the
padding of the parent, got my leftover space, and calculated that as a
percentage of the parent, so my margin-right would be that % value.
It didn’t work! I fiddled with fewer digits after the decimal, then began
incrementing down, and it never did act right. But when I put in the “hard”
value in ems, it worked!
Why so? Why would % not work?
the selector for the first two thumbnails is below…commented out the initial
percent value. Thank you!
.thumb-one-two{
float:left;
width:270px;
/* margin-right:47.87234%; */
margin-right:2.8125em;
}
thumb-three just has to have the correct width and float left:
#thumb-three{
float:left;
width:270px;
}
__
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/
