Set CSS Width To 100% + Right Border Is Missing?

I set a div's width to 100% of the window. When I apply a border to this div, the right border is cut off. Do I have to perform a box model hack to this?

Solution 1:

Already has been answered, but I like this solution better. Add this to textBoxContainer:

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

It will put the border on the inside of the box. More info: http://css-tricks.com/box-sizing/

Edit - Doesn't work on IE7, but not much does. Here's more on that: box-sizing support in IE7

Solution 2:

The easiest fix in your case is this:

#textBoxContainer {
    height: 30%;
    position: fixed;
    z-index: 99;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #999;
    border: 4px solid #000;
}

<div id="textBoxContainer"></div>

Live Demo

• Remove width: 100%.
• To make the div fill the screen, instead add right: 0.

It's perfectly viable to give an element both a left and a right (or a top and a bottom), like we're doing here.

Solution 3:

Somewhat related firefox bug
A 100% select dropdown will often be missing its right border (dependent on width of window)
https://bugzilla.mozilla.org/show_bug.cgi?id=924068
No workaround other than to try width: 99%