0

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>

Edited by Julia25: n/a

2
Contributors
2
Replies
3
Views
6 Years
Discussion Span
Last Post by Julia25
0

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.

Edited by teedoff: n/a

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.