Member Avatar for 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][/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 because: n/a
  • 2 Contributors
  • 2 Replies
  • 78 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by Julia25

Dani AI

Generated

Good call from and thanks to for the screenshot — the symptom is a float/spacing wrap and there are a couple of simple, robust ways to avoid constant pixel math.

One: make padding and borders part of the element width with box-sizing so widths behave intuitively across the layout.

/* include padding/border in width calculations */
*, *::before, *::after {
  box-sizing: border-box;
}

Two: replace the float-based alignment with Flexbox so the browser distributes space automatically and long content can shrink. Note the important min-width: 0 on the flex child so text can wrap instead of forcing overflow.

#CONTENT { display: flex; flex-wrap: wrap; align-items: center; }
.photo   { flex: 0 0 auto; max-width: 160px; }
.meta    { flex: 1 1 auto; min-width: 0; padding-left: 10px; }

Additional tips: if floats remain, contain them with a clearfix on the parent; test layout live with the browser DevTools inspector (Chrome/Firefox) to watch box sizes and paddings. For details on these techniques see box-sizing on MDN and .

Recommended Answers

All 2 Replies

Member Avatar for 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.

Edited by teedoff because: n/a
Member Avatar for Julia25

Got it! Thanks!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.