ansaurus

Question

CSS Percentage Bars

Answer 1

+2 A:

By the W3C box model, margins and padding add to the width of a <div>. So instead of 100%, the width becomes more than that, and causes the progress bar to overflow the blue border.

You'll have to change the 3px margin of #perc_in to a 3px padding on #perc, and remove the padding on #perc_in.

Here is the updated code (added by Blaenk):

#perc {
    width:667px;
    border:4px solid blue;
    padding:3px;
}

#perc_in {
    width:100%;
    font-size:17pt;
    background:red;
}

BoltClock 2010-09-11 21:08:13

Hope you don't mind I added the added the code for you, tested and works.

Jorge Israel Peña 2010-09-11 21:10:52

Ah great - great. Forgot about padding/margins.

Dan 2010-09-11 21:12:19

@Blaenk: thanks, looks good to me. I should also remove the part about stretching `#perc` because it doesn't sound right.

BoltClock 2010-09-11 21:15:22

Answer 2

A:

The reason is: W3C box model. It says that final width of an element is a sum of width and padding properties. So if you declare that element suppose to have width: 100% (to be exact: 667 pixels in this case) and also declare that element should have 3-pixel padding from left and right (total: 6 px) the final width of the element is: 667 + 3 + 3 = 673 pixels.

Crozin 2010-09-11 21:10:06

ansaurus

tags:

views:

answers:

CSS Percentage Bars

related questions