Converting width from percentage to pixels

Question

I have a table inside a <div>:

<div id="fixeddiv">
    <table id="fixedtable">
        <tr class="firstrow">
            <td class="td11"></td>
            <td class="td12"></td>
            <td class="td13"></td>
        </tr>

        <tr class="secondrow">
            <td class="td21" style="width:10%"></td>
            <td class="td22" style="width:20%"></td> 
            <td class="td23" style="width:70%"></td>
        </tr>
    </table>
</div>

CSS:

#fixeddiv
{
    overflow:auto;
    margin:0px;
    padding:0px;
    position: relative;
    text-align:left;
    width: 48%;
}

#fixedtable
{
    background-color: White;
    border-spacing:0px;
    cursor: pointer;
    width: 100%;
    height: 100%;
    font-family: Calibri !important;
    color: Black;
    font-size: 14px;
}

.firstrow
{
    position: absolute;
    margin: 0px;
    left: 0;
    top: 0;
    background: url(../Content/Images/header.jpg) repeat-x center top;
    color: White;
    font-weight: bold;
    text-align: center;

}
#fixedtable tr td
{
    padding: 5px !important;
    border: 1px solid #FFFFFF;
    text-align: center;
}

I am calculating the width of td21 with $('.td21').width() and assigning the width to td11 like $('td11').width($('.td21').width()).

The problem is that the widths applying are not same, they vary by 1px and I could not find how this 1px difference occur. The .td21 width is 1px greater than .td11.

Can any one please help me to find the solution?

is it always greater on 1 px? Why don't just -1 to the value) — Feanor, Jul 06 '12 at 08:09

Nikola K. · Answer 1 · 2012-07-06T10:28:26.393

18

<div id="div-1" style="width: 1000px;">
    <div id="div-2" style="width: 10%;"></div>
</div>

<script language="javascript">                
    var percents = parseInt(document.getElementById("div-2").style.width);
    var parentWidth = parseInt(document.getElementById("div-1").style.width);
    var pixels = parentWidth*(percents/100);
    alert(pixels); // will print "100"
</script>

edited Jul 06 '12 at 10:28

answered Jul 06 '12 at 08:13

Nikola K.

7,093
13
31
39

score 3 · Answer 2 · answered Jul 06 '12 at 08:10

3

Try using .outerWidth() instead of .width()

answered Jul 06 '12 at 08:10

Dev

781
9
29

Thank you! It helps! My solution: var el = $('.elem'), temp = el.outerWidth(); el.css('width', temp + 'px'); – Andrew Savetchuk Dec 05 '16 at 18:06

WolvDev · Answer 3 · 2012-07-06T08:24:09.553

This happens when you use percent + padding. Pixel is int and so it will be rounded.

In your example: 10%, 20% and 70% is the width of the container and than you need to add the padding and border.

With this decimal numbers will occur and than need to be rounded.

EXAMPLE:

Your page is 900px width. Without padding, margin or border you will have widths of 630px (70%), 160px (20%), 90px (10%).

But when you add the border + padding the percents must be calculated from 900 - (3 tds * 10px padding (left and right)) - (3 tds * 2px border(left and right)) = 864px.

With 864px width you will get: 604,8px (70%), 172,8px (20%), 86,4px (10%).

And this is where the 1px difference occures.

Converting width from percentage to pixels

3 Answers3

Linked