Wrong output when middle width is 50%


#1



Actually i just cant figure out why i cant change my width of middle class to 50%?
(im curious because when left width is 25%,right width is 25,and when middle width is 50%, it means the total should be 100% width,but the right div suddenly moved to next "line" when middle width is 50%)


div{
	border:1px solid black;
}

#header{
	position:fixed;
	height:100px;
	width:100%;
	background-color:yellow;
	z-index:1;
	text-align:center;
}

#footer{
	height:200px;
	width:200px;
	background-color:red;
	width:100%;
	clear:both;
	text-align:center;
}
 
.left{
	float:left;
	height:100px;
	width:25%;
	background-color:green;
	margin-top:100px;
	text-align:center;
}

.middle{
	margin-top:100px;
	float:left;
	height:100px;
	width:50%;
	background-color:gray;
	text-align:center;
}

.right{
	margin-top:100px;
	float:left;
	height:100px;
	width:25%;
	background-color:blue;
	text-align:center;
}


#2

so, your left is 25% + 50% of your middle, and 25% for your right, which should make 100%, and you are right, but there is one thing you don't know, and another you might not sure

By default, your body has margin of (i believe) 8px, which means you have 8px + 25% + 50%, if you then have another 25%, you will exceed the 100%, which means the block goes to the next line, happily we can counter this effect by simply overwriting it:

body {
  margin: 0;
}

by default, border and padding will expand a element (a div who's dimensions are 100 by 100px and has a 2px border, is actually 104px by 104px

Now, you could shrink all the elements, to account for the border, or you could just simple do:

div {
  box-sizing: border-box;
}

which will make padding and border part of the width and a height a element,

That should do the trick, now the divs should be beside each other


#3

nice explanation....actually i wasn't know that body has 8px margin by default+div dat actually adds border width to div dimmension hahahaha......once again, great explanation, u made me more interested on building a website!