27

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>
mortalis
  • 2,060
  • 24
  • 34
worked
  • 5,762
  • 5
  • 54
  • 79

3 Answers3

45

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

Community
  • 1
  • 1
d_rail
  • 4,109
  • 32
  • 37
  • Worked perfectly for me. The accepted answer didn't work for me as I was having the same problem but using width:33.33%. – Daniel Imms Aug 21 '12 at 06:14
25

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.

user692942
  • 16,398
  • 7
  • 76
  • 175
thirtydot
  • 224,678
  • 48
  • 389
  • 349
1

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%

Brad Kent
  • 4,982
  • 3
  • 22
  • 26