I need to position 2 divs side by side as if they would appear as a single div

Question

i have a pink colored container and inside it there are 2 divs, red and green placed side by side with display:inline-block; rule in css.i need both this divs to take 50% width so that they appear as a single div.but when i set the width to 50% the green jumps below red div.when i set width to 49% it jumps to same line but there are gaps in between which is not what i want, some body help.

i need them to stick togather in a line as if they appear as a single div. i'll put my code pen link here... http://codepen.io/ShamZ/pen/gLXBow HTML

<div class="container">
   <div class="box">
   </div> 
   <div class="box2">
   </div> 
</div>

css

.container{
width:800px;
height:800px;
background-color:pink;
}
.box{
display:inline-block;
width:50%;
height:50px;
background-color:red;
}
.box2{
display:inline-block;
width:50%;
height:50px;
background-color:green;
}

score 0 · Answer 1 · answered Nov 30 '16 at 20:08

This is a known issue where white-space between inline-block elements cause margins to appear. Take a look at this example (fixed)

.container{
width:800px;
height:800px;
background-color:pink;
}
.box{
display:inline-block;
width:50%;
height:50px;
background-color:red;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.box:nth-of-type(2) {
  background-color: green;
  }

<div class="container">
   <div class="box">
   </div><div class="box">
   </div> 
</div>

score 0 · Answer 2 · answered Nov 30 '16 at 20:08

Switch to floats, ala http://codepen.io/davewallace/pen/aBVQLN

inline-block can result in odd spacings that may need further workarounds.

When using floats you can achieve the desired effect simply, you may need to investigate the use of 'clearfix' on containers wrapping your floated elements.

score 0 · Accepted Answer · answered Nov 30 '16 at 20:24

the Problem with our Code is that HTML detect whitespace between the box elements in the container - and therefor it seems like theres not enough space in the container for 2 Divs with 50% width. - Set them to 48% or even smaller and u will see that they will fit among a line.

One Solution can be:

.container{
  width:800px;
  height:800px;
  background-color:pink;
  display:inline-block;
font-size: 0;
}


.box{
  display:inline-block;
  width:50%;
  height:50px;
  background-color:red;
}
.box2{
  display:inline-block;
  width:50%;
  height:50px;
  background-color:green;
}

<div class="container">
  <div class="box">
  </div> 
  <div class="box2">
  </div> 
</div>

and then set another font-size in child elements

score 0 · Answer 4 · answered Nov 30 '16 at 20:32

Add font-size:0 to parent element .container

.container{
  width:800px;
  height:800px;
  background-color:pink;
  font-size:0;
}


.box{
  display:inline-block;
  width:50%;
  height:50px;
  background-color:red;
}
.box2{
  display:inline-block;
  width:50%;
  height:50px;
  background-color:green;
}

<div class="container">
  <div class="box">
  </div> 
  <div class="box2">
  </div> 
</div>

I need to position 2 divs side by side as if they would appear as a single div

4 Answers4