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

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.