Why aren't two border-box 50% divs side-by-side?

Question

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

Because `div` elements are `display: block` by default (that is, one element per row/line). You need to set them to `float` or `display: inline-block`. Also note that `display: inline-block` will add its own space between the two blocks which would have to be nullified. — Harry, Sep 24 '15 at 16:02
[This w3c article](http://www.w3.org/TR/CSS21/visuren.html#block-formatting) about the Block formatting contexts is relevant: `In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block.` — Nico O, Sep 24 '15 at 16:21
@GeorgeMauer: Which implies that the next element cannot be on the same line unless the `display` is modified. — Harry, Sep 24 '15 at 16:28
Just as a note to everyone who is suggesting floats. Yes that solve the issue. But for goodness sake, it's 2015, stop using floats. We have flexbox. — George Mauer, Sep 24 '15 at 16:34
@Harry You are correct. I would argue it's not a duplicate as that question doesn't ask *why* and the answer is only implied as opposed to given. However, that is a judgement call. — George Mauer, Sep 24 '15 at 16:43
@GeorgeMauer: Absolutely and that's why I didn't go ahead and hammer it :) — Harry, Sep 24 '15 at 16:44

Siddharth Thevaril · Accepted Answer · 2015-09-24T16:39:19.253

5

First you need to understand that elements in HTML based on display property are of 2 types -

Block (eg: div, p, h1 - h6..etc)
inline (eg: span..etc)

Block level elements appear one below another, or as you may call it being stacked below each other,

whereas,

inline elements are created on the same line unless they are specifically styled as display: block OR if they encounter a <br /> tag.

SOLUTION:

You can use the property display:inline-block

Problem: It will add white spaces and put the second div on the next line even with width: 50%;. Now, there are several ways to remove whitespaces, you can try any one of them.
Use float: lefton both the div's

    body {
     padding: 0;
     margin: 0;
    }
    div {
     height: 300px;
    }
    .left {
     background-color: blue;
    }
    .right {
     background-color: red;
    }
    .half {
     width: 50%;
        float: left;
    }

    .half-new {
        display: inline-block;
        width: 50%
    }

<h1>Using Float</h1>
<div class="half left"></div>
<div class="half right"></div>
<hr />
<h1>Using inline-block</h1>
<div class="half-new left"></div><!--
--><div class="half-new right"></div>

edited Sep 24 '15 at 16:39

answered Sep 24 '15 at 16:20

Siddharth Thevaril

3,722
3
35
71

Please see my edit. I meant to make things inline-block. It was a mistype. Thank you for highlighting the whitespace though I still don't understand where it comes from. – George Mauer Sep 24 '15 at 16:31
That link is broken but you imply the solution by explaining that there is a white-space created implicitly by the line-break. Can you edit the answer to say as much and I'll accept? – George Mauer Sep 24 '15 at 16:38
@GeorgeMauer you should read this - https://boagworld.com/design/why-whitespace-matters/ – Siddharth Thevaril Sep 24 '15 at 16:38
edited the answer and fixed the link. Yes, the white-spaces are added implicitly while using `inline-block` – Siddharth Thevaril Sep 24 '15 at 16:40
@SiddharthThevaril - inline-block don't add space. In OP, the two divs were on different line and new line is rendered as single white-space by html for inline elements and therefore there was less room than 50% available for second div(100% - 50% - width of a white-space character) – Amitesh Apr 06 '18 at 07:12

score 1 · Answer 2 · answered Sep 24 '15 at 16:02

1

Two reasons:

Div elements are display: block by default
You have space between the elements and space takes up … um space.

Change the display property and remove the space.

body {
 padding: 0;
 margin: 0;
    border: 0;
}
div {
 height: 300px;
 box-sizing: border-box;
 margin: 0;
    display: inline-block;
}
.left {
 background-color: blue;
}
.right {
 background-color: red;
}
.half {
 width: 50%;
}

<div class="half left"></div><div class="half right"></div>

answered Sep 24 '15 at 16:02

Quentin

914,110
126
1,211
1,335

Or he could float them left for example too, – j08691 Sep 24 '15 at 16:03
2

*space takes up … um space* > Can you verify this by scientific facts? – Nico O Sep 24 '15 at 16:05
@NicoO —You could edit the snippet and put the white space back between the two elements. – Quentin Sep 24 '15 at 16:09
@j08691 — Floating is very good for [this](http://www.w3.org/TR/CSS2/images/float2p.png) but once you start using it to just put two things side by side you venture closer to having to start clearing things as well. – Quentin Sep 24 '15 at 16:11
I think my attempt to make a joke failed miserably ;) I did not meant to waste your time. Sorry. – Nico O Sep 24 '15 at 16:12
1

In [How to remove the space between inline-block elements?](http://stackoverflow.com/q/5078239/1529630) there is a full list of ways to deal with the space problem. – Oriol Sep 24 '15 at 16:14
Thanks for that link @Oriol that and the andswer of Sidesec provided the clue - there's a whitespace coming from the line break – George Mauer Sep 24 '15 at 16:39

Why aren't two border-box 50% divs side-by-side?

2 Answers2

SOLUTION: