Trouble with the box model - html

Question

I have a container that I am calling #profile-grid and I want it to be 330px wide. It contains an image that is 330px wide and an inline list below the image that is 330px wide with a 1px border all around. I want the list and image to be exactly the same width. In IE it lines up perfect, but in Chrome it is 2px too short. What am I doing wrong? http://jsfiddle.net/ZPQUP/13/

Answer 1

The problem is, as your title suggested, the box model.
Your best bet is to just explicitly set the box model, and then use a polyfill to make it work for older browsers. Paul Irish describes the problem and solution here: http://paulirish.com/2012/box-sizing-border-box-ftw/
I've shown what this looks like in an updated fiddle here: http://jsfiddle.net/mstauffer/ZPQUP/14/
Essentially, the different box models differ on whether borders and paddings are included in or added externally to the width.

Answer 2

Your div#listed is 330px wide plus 1 pixel either side for the border. That's how the 'standard' box model works. Reduce the width by that 1 pixel each side (i.e. 298px) and everything will line up...
... in the good browsers. In older versions of IE, you'll see a problem. Use a valid DOCTYPE and that will be resolved.

Answer 3

DEMO:
HTML:
<div id="profile-grid">
<img src="http://a8.sphotos.ak.fbcdn.net/hphotos-ak-snc7/428132_268919676513976_100001878373747_678116_241912084_n.jpg"/>
<ul id="listed">
<li class="item"> Profile </li>
<li class="item"> About </li>
<li class="item"> Photos </li>
<li class="item"> Albumlist </li>
</ul>
</div>​
CSS:
#profile-grid {
height: 302px;
width: 330px;
}
#profile-grid img {
display: block;
width: 100%;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
#listed {
height: 50px;
border: 1px solid #ddd;
overflow: hidden;
}
li.item {
margin: 0px;
display: inline;
float: left;
height: 50px;
border-left: 1px solid #ddd;
display: inline;
}
#listed li a {
display: block;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 15px;
color: #123454;
line-height: 50px;
padding: 0px 15px 0;
text-align: center;
text-decoration: none;
vertical-align: baseline;
}
#listed li a:hover{
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 15px;
color: white;
background-color: #123454;
text-align: center;
text-decoration: none;
}
NOTES:
<ul> is a block element. whatever the width of the parent, it grows with it. sort of an automatic 100%. give the parent 330px, it also goes 330px.
as long as block elements don't have a specified width, the 100% width of it will include it's borders. so if you have a parent of 330px, the block element (in this case the <ul>) will be 298px wide + 1px left border + 1px right border.
on the other hand, specifying width for it will exclude borders in the count, thus the overflow.
giving an image display:block and width:100% also does the same thing PLUS it preserves the image ratio (and not squishing it in any way)
​

Answer 4

To avoid this issue, it is ideal to not mix width and padding or border on the same element.
In your case, if you simply remove the width: 330px from .listed and add it to .listed ul instead, you should be fine:
#listed {
display: block;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
height: 50px;
overflow: hidden;
border: 1px solid #ddd;
}
#listed ul {
margin: 0px 0px 0px -1px;
padding: 0px 0px 0px 0px;
overflow: hidden;
width: 330px;
}