Is it safe to occupy 100% width when using DIV

Question

Consider the code below

<div id=container>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

And CSS

#container {
    width: 500px;
    background-color:red;
    overflow: auto;
}
#container div {
    float: left;
    width: 22.15%;
    margin-right: 3.8%;
    height: 100px;
    background-color: blue;
    color:white;
}
#container div:last-child {
    margin-right:0;
}

The width and margin occupy the 100% (22.15% *3 + 22.15%) of the container. Is it cross browser safe to do this? Or should I only occupy like 98% for safe?

Demo:http://jsfiddle.net/NSndR/

Answer 1

That is mostly true, just beware that border's and margins do not count towards that 100%. For example, if your div is 100%, but it has a 2px margin, it is actually 100% + 4px... same goes with borders.

Answer 2

Yes, 100% percent width (including padding, border and margin) is safe across browsers (guess what, even Internet Explorer). Percentage values should also work as discussed in this SO question.