What went wrong?

[Julia25]

Ive made a simple css but i dont know why the div go down if i make the width of style #ID_Number more that 251px
really weird!

[IMG]http://img543.imageshack.us/img543/1089/weirdk.jpg[/IMG]

<style type="text/css">
#CONTENT {
	height: 222px;
	width: 421px;
	background-color: #E8E8FF;
}
#B8 {
	height: 25px;
	width: 200px;
	float: left;
	clear: both;
}
#B7 {
	height: 25px;
	width: 200px;
	float: left;
}
#B6 {
	height: 25px;
	width: 200px;
	float: left;
}
#B5 {
	height: 25px;
	width: 200px;
	float: left;
}
#B4 {
	height: 25px;
	width: 200px;
	float: left;
	background-color: #CC9;
}
#Location {
	height: 21px;
	float: left;
	width: 251px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-weight: bold;
	padding-left: 10px;
	color: #333;
	background-color: #96F;
}
#ID_Number {
	height: 26px;
	float: left;
	width: 252px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: bold;
	padding-left: 10px;
	padding-top: 7px;
	color: #333;
	background-color: #FC9;
}
#Photo {
	float: left;
	height: 129px;
	width: 136px;
	padding-top: 17px;
	padding-left: 17px;
	padding-right: 7px;
	background-color: #9FF;
}
#Photo img {
	height: 112px;
	width: 112px;
	
}
</style>
<div id="CONTENT">
<div id="Photo"></div>
  <div id="ID_Number">ID_Number"</div>
  <div id="Location">Marina Del ray, Los Angeles</div>
  <div id="B4">"B4"</div>
  <div id="B5">"B5"</div>
  <div id="B6">"B6"</div>
  <div id="B7">"B7"</div>
<div id="B8">"B8"</div>
</div>

[teedoff]

Because you break your box model by one pixel. Thats all it takes. If you add the width of the photo div and the width of ID_number AND add all your left and right paddings and margins for both of those divs, that number doesnt fit in the 421 pixel wide content div.

Remember that margins and paddings count in figuring widths of divs as well. You should download firebug for firefox and learn to use it. Its free and full of very useful tools like a layout tool that shows the box model of every element(div) on your page along with the widths and paddins and margins.

[Julia25]

Got it! Thanks!