Set CSS width to 100% + right border is missing?

Question

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?

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

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

Answer 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

Answer 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.