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

css border html
worked picture worked · Feb 26, 2011 · Viewed 34.6k times · Source

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?

Answer

d_rail picture d_rail · Jul 9, 2012

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

Related questions

Placing border inside of div and not on its edge

I have a <div> element and I want to put a border on it. I know I can write style="border: 1px solid black", but this adds 2px to either side of the div, which is not what …

Read More
How to set a border for an HTML div tag

I am trying to define a border around a div tag in HTML. In some browsers the border does not appear. Here is my HTML code: How do I set a border for an HTML div tag?

Read More
How to increase space between dotted border dots

I am using dotted style border in my box like .box { width: 300px; height: 200px; border: dotted 1px #f00; float: left; } I want to the increase the space between each dot of the border.

Read More