Perfect Width To Fit Div Exactly - html

Question

I have boxes floated inside a div sort of like the SO Chat except i am making a box for my own website where users can make their own chat room, these boxes on the page represent chatrooms and i want to make a perfect width for them so they will fit exactly on the page without any excess space in the margins. the main div they are positioned in is 965px with a padding of 15px on the left and right side of it making a 935px width i reduced the width from 965px to 935px to keep a total width of 965px.
To get an idea of my scenario check out A Fiddle
As you can see there is some space left at the end right side of the div and i dont want that, i want the chat boxes to fit pixel perfectly the full width and remember to take into account that borders count as widths too. If someone could help me that would be great!
CSS Styles
body {
width:1000px;
}
#Body {
width:935px;
padding:15px;
height:500px;
background-color:#F1F1F1;
margin:0 auto;
}
.ChatRoom {
float:left;
width:223px;
height:200px;
border:1px solid #666;
cursor:pointer;
margin-right:8.75px;
background-color:#FFF;
}
.ChatTitle {
width:100%;
height:30px;
line-height:30px;
font-size:13px;
font-weight:bold;
text-align:center;
background-color:#C6D6D9;
border-bottom:2px solid #9C0;
}

Answer 1

You can accomplish this using box-sizing:border-box. What it does is includes the padding and border sizes from the width, as opposed to its normal behaviour of adding to it (which makes the <div> overflow to the next line). I've added a div.Inner here which will have the border and white background while the .ChatRoom is used to provide space using padding.
jsFiddle
HTML
<div class="ChatRoom">
<div class="Inner">
<div class="ChatTitle">My Chat Room</div>
</div>
</div>
CSS
.ChatRoom {
float:left;
width:25%;
height:200px;
padding:8px;
box-sizing:border-box;
}
.ChatRoom .Inner {
border:1px solid #666;
box-sizing:border-box;
background-color:#FFF;
cursor:pointer;
height:100%;
}
Without border-box
Turns out it's pretty easy without border-box too, utilising margin on .Inner.
jsFiddle
.ChatRoom {
float:left;
width:25%;
height:200px;
}
.ChatRoom .Inner {
border:1px solid #666;
margin:8px;
background-color:#FFF;
cursor:pointer;
height:100%;
}

Answer 2

http://jsfiddle.net/DyTT8/1/
The last div needs to have the margin reset if not it will add to the 15px of padding. I did this by giving it class="last and making the .ChatRoom div 225px; This will give you the proper spacing.
You could also put the divs in an unordered list and target the last div with li:last-child and remove the margin that way.