Question
I'm using box-sizing property to align left div, right div and center div within container div. The div's are not aligning. Below is the code i have tried. I also tried using px. I am using Firefox to check.
I have also added in jsfiddle, http://jsfiddle.net/F9ds9/
<!DOCTYPE html>
<html>
<head>
<style>
.container{
width:100%;
}
#left{
-moz-box-sizing: border-box;
margin-top:12px;
float:left;
border:1px solid #000000;
width:20%;
}
#right{
-moz-box-sizing: border-box;
margin-top:12px;
float:left;
border:1px solid #000000;
width:20%;
}
#center{
-moz-box-sizing: border-box;
margin:12px;
float:left;
border:1px solid #000000;
width:60%;
}
</style>
</head>
<body>
<div class="container">
<div id="left">LEFT</div>
<div id="center">CENTER</div>
<div id="right">RIGHT</div>
</div>
</body>
</html>
Solution
.container{
width:100%;
}
#left{
-moz-box-sizing: border-box;
margin-top:12px;
float:left;
border:1px solid #000000;
width:20%;
}
#right{
-moz-box-sizing: border-box;
margin-top:12px;
float:left;
border:1px solid #000000;
width:20%;
}
#center {
-moz-box-sizing: border-box;
border: 1px solid #000000;
float: left;
margin-top: 12px;
width: 50%;
}
OTHER TIPS
border-box is not margin-box (which by the way does not exists :) so just remove margin:12px;
or deal with it:)
In this demo I just modified margin:12px;
for the center element to margin-top:12px;
(just like the other elements). If you need the margin that you need to do some math regarding your element's widths!
_____ _____________ _____
20% 12px 60% 12px 20%
even using border-box
ends up to a sum of 100%+24px
The box-sizing:border-box
or whatever box sizing you are using the box model is
width + padding + border = actual visible/rendered width of an element's box,
height + padding + border = actual visible/rendered height of an element's box.
See this demo https://css-tricks.com/box-sizing/#demo adding excess margin to child will make this property useless
Please Check the fiddle
<body>
<div class="container">
<div id="left">LEFT</div>
<div id="center">CENTER</div>
<div id="right">RIGHT</div>
</div>
</body>
There are some things which you should know
Total:100% for the container Left and right :20% Center :60%
so total 100% will come inside the container
and on top of that you have given border
so it will add extra 6px for the three container making it exceed more than the 100% width of container so the right section will jump down.
And for center container you have not given margin top
Please refer CSS box modelling you will understand. and use firbug in firefox for debugging it will be easier.