3

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

6
  • 2
    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, 2015 at 16:02
  • This w3c article 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, 2015 at 16:21
  • @GeorgeMauer: Which implies that the next element cannot be on the same line unless the display is modified.
    – Harry
    Sep 24, 2015 at 16:28
  • 1
    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. Sep 24, 2015 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. Sep 24, 2015 at 16:43

2 Answers 2

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:

  1. 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.

  2. 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>

5
  • 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. Sep 24, 2015 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? Sep 24, 2015 at 16:38
  • @GeorgeMauer you should read this - boagworld.com/design/why-whitespace-matters Sep 24, 2015 at 16:38
  • edited the answer and fixed the link. Yes, the white-spaces are added implicitly while using inline-block Sep 24, 2015 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 6, 2018 at 7:12
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>

7
  • Or he could float them left for example too,
    – j08691
    Sep 24, 2015 at 16:03
  • 2
    space takes up … um space > Can you verify this by scientific facts?
    – Nico O
    Sep 24, 2015 at 16:05
  • @NicoO —You could edit the snippet and put the white space back between the two elements.
    – Quentin
    Sep 24, 2015 at 16:09
  • @j08691 — Floating is very good for this 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, 2015 at 16:11
  • 1
    In How to remove the space between inline-block elements? there is a full list of ways to deal with the space problem.
    – Oriol
    Sep 24, 2015 at 16:14

Not the answer you're looking for? Browse other questions tagged or ask your own question.