Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Deepthi Yakkala
3,238 PointsPixels to Percentages
Hey Hi,
can any body help me in converting pixels to percentages in smells like bakin, margins and paddings are in pixels . i am little confused in converting them.
3 Answers
alexspencer
5,194 PointsHello,
Basically, if you divide the element inside its container you get the answer....
So if you have an element that is 600px wide inside a container that is 900px wide the sum would be:
600 / 900 = 0.66666
So the percentage of the element inside the container would be 66%
This method also works with converting pixels to ems as well, which is especially important if you have a responsive site.
I hope this helps
:-)
Deepthi Yakkala
3,238 PointsFor Ex:
.maindiv{
width:1000px;
}
.grid1{
width:55%;/*550px*?
}
.grid2
{
width:74.5%;/*745px*/
}
ul{
{
margin: 120px 0 0 0;
list-style: none;
float: right;
}
consider
<body>
<div class="main div">
<div class="grid1">
<img>
</div>
<div class="grid2">
<ul><li> </li></ul>
</div>
</div>
</body>
consider this example ,what would be the margin px to percentage of ul?could you please help me in converting the px to percentages of margin of ul?
alexspencer
5,194 PointsWith responsive sites, you really need to know exactly the widths of your containers, grids etc before you start converting.....I'm not sure what you have done above....
Are you saying your main container is 1000px.....with two columns inside that container?
Where is the ul going?
Thanks.
Deepthi Yakkala
3,238 PointsYes the total width of the container is 1000px and the 2 cols goes inside the main container one with 550px and another with 745px and ul goes in to the 2nd col(under the grid2)
Paul Graham
1,396 PointsPercentages are simple, it's just Target/Context
That means if your column is supposed to be based on 550px and it's in an 800px div, your percentage would be 550/800 or 68.75%. If you wanted to put a 200 px column inside that 550px column, your percentage would be 200/550 or 36.3636364%
That's really all there is to it. Target width divided by context (usually meaning screen width or containing div width).
Deepthi Yakkala
3,238 Pointsya..i got this..but little confusion in converting the margins and padding inside the div,what formula i have to use for that.
Paul Graham
1,396 PointsYou almost never want to set padding in % as it's almost always static. If you want to use a relative size, use ems so it sizes from the text. Margins, however, are the exact same as the div widths. The context is the containing div, not the div you're defining margins for.
Paul Graham
1,396 PointsFor example, let's say you have a structure like this.
<div style="width:10px">
<div class="target"></div>
</div>
Let's say you want 2px margins and 6px width.
.target {
width="60%" // 6 divided by 10
margin="0 20%" // 2 divided by 10
}
Deepthi Yakkala
3,238 Pointseven if margins and paddings are in pixels it wont effect the responsive design??
Paul Graham
1,396 PointsNot if you set all box-sizing to border-box sizing like you should.
Deepthi Yakkala
3,238 PointsThank you so much for the help :)
Shankar Narayan
9,099 PointsBasically when calculating % for margin and padding you need to divide the margin/padding px to the higher elements size.
Deepthi Yakkala
3,238 PointsThanks.
Deepthi Yakkala
3,238 PointsDeepthi Yakkala
3,238 PointsThis helps converting width in px to % ,what about the margins in the col?how can i change them to px to percentages?i really wanna know how the margins converts in to %, appreciate the help
Deepthi Yakkala
3,238 PointsDeepthi Yakkala
3,238 Pointsnever mind...i got it...thanks for the help.