1

I am attempted to have set two div elements within another div to be alongside each other.

The css I currently have sets the two divs to be display: inline-block; with the width elements of the two divs adding up to 100%, thereby filling the whole parent , however this causes the two divs to stack, rather than appear next to each other.

Applying a float: left to one of the elements will cause them to appear alongside each other, as will changing the sum of the width to be <100% (i.e. 39% and 60%)

My question is what causes the divs to stack, and need to be floated? Is there some buffer I can't see that prevents you from having two divs that add up to 100% inside another one?

Below is an example of the problem. https://jsfiddle.net/q1g9z1o4/

Beast-a-tron
  • 503
  • 10
  • 28

2 Answers2

1

Inline elements have an empty space between them (like words in text). Removing all white-space from the fiddle solves this.

<div id="div1"><div id="inner1"></div><div id="inner2"></div></div>

This css tricks article has several solutions to your problem:

  • Remove the spaces
  • Negative margin
  • Skip the closing tag
  • Set the font size to zero
  • Use float instead
  • Use flexbox instead

https://jsfiddle.net/ts0u828x/

OlliM
  • 7,023
  • 1
  • 36
  • 47
0

Replace

display: inline-block;

with

display: block;
float: left;

Updated Fiddle

AlexG
  • 5,649
  • 6
  • 26
  • 43