Home/ Questions/Q 1058235
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T17:59:42+00:00

I am trying to make a SIMPLE Css percent bar. OK go to http://htmledit.squarefree.com/

  • 0

I am trying to make a SIMPLE Css percent bar.

OK go to http://htmledit.squarefree.com/
and copy/paste this in it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<style>
#perc {
width:667px;
border:4px solid blue;
}
#perc_in {
width:100%;
padding:3px;
font-size:17pt;
background:red;
margin:3px;
}
</style>

</head>
<body>
<div id="perc"><div id="perc_in">100%</div></div>
</body>
</html>

As you can see the red inside bar is overlapping the blue border… why? :\

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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;
}
    • 0