I know many techniques for positioning divs side-by-side. However I've never understood why taking two border-box divs with width: 50% doesn't produce side-by-side divs. From what I understand of css, with margin, padding, and border out of the equation this should absolutely work.
body {
padding: 0;
margin: 0;
border: 0;
}
div {
height: 300px;
box-sizing: border-box;
display: inline-block;
margin: 0;
}
.left {
background-color: blue;
}
.right {
background-color: red;
}
.half {
width: 50%;
}
<div class="half left"></div>
<div class="half right"></div>
What am I missing?
Edit:
As many people are pointing out, display: block
will not give me side-by-side behavior. This was a mis-type. I meant to make everything inline-block
div
elements aredisplay: block
by default (that is, one element per row/line). You need to set them tofloat
ordisplay: inline-block
. Also note thatdisplay: inline-block
will add its own space between the two blocks which would have to be nullified.In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block.
display
is modified.