Stack divs side by side without using float left

Question

I want to stack divs ( 2 divs in 1 row )which are 50% width side by side without using float:left because it will taken the div out of the normal flow. Flexbox is also not preferred because of limited browser support. How can I get the desired view without changing the width?

my code

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

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

.col-content {
  padding: 0.5em;
  background-color: #ddd;
  border: 1px solid #aaa;
  color: #333;
}

<div class="container">
  <div class="col">
    <p class="col-content">
      col Item 1
    </p>
  </div>
 
  <div class="col">
    <p class="col-content">
      col Item 2
    </p>
  </div>
  
  <div class="col">
    <p class="col-content">
      col Item 3
    </p>
  </div>
 
  <div class="col">
    <p class="col-content">
      col Item 4
    </p>
  </div>
</div>

You mean div will not go below another. You want horizontal scrollbar? — ketan, Feb 02 '16 at 11:21
Take a look at http://stackoverflow.com/questions/6871996/css-two-inline-block-width-50-elements-dont-stack and http://stackoverflow.com/questions/2628050/ignore-whitespace-in-html — Nenad Vracar, Feb 02 '16 at 11:36
@ketan Yes, div to be positioned sidewise. that is 2 divs in row. not below one another — , Feb 02 '16 at 11:36

score 1 · Accepted Answer · answered Feb 02 '16 at 11:36

Strange but true - you can just remove the spaces between the elements from the HTML - like this:

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
.col {
  display: inline-block;
  width: 50%;
}
.col-content {
  padding: 0.5em;
  background-color: #ddd;
  border: 1px solid #aaa;
  color: #333;
}

<div class="container">
  <div class="col">
    <p class="col-content">
      col Item 1
    </p>
  </div><!--
 
  --><div class="col">
    <p class="col-content">
      col Item 2
    </p>
  </div><!--
  
   --><div class="col">
    <p class="col-content">
      col Item 3
    </p>
  </div><!--
 
   --><div class="col">
    <p class="col-content">
      col Item 4
    </p>
  </div>
</div>

You can also try a margin of -4px on each inline-block element

Unorthodox way. but still working perfect. But Its seems the problem will comeback if I try to intent the HTML code. — , Feb 02 '16 at 11:42
It should be fine as long as the width of the inline blocks is half the width of the container. — sideroxylon, Feb 02 '16 at 11:44

Santhosh B · Answer 2 · 2016-02-02T11:58:17.750

Remove spaces between col div ending tag and starting tag.

For Example:

<div class="col">
    <p class="col-content">
      col Item 1
    </p>
</div>
<div class="col">
    <p class="col-content">
      col Item 2
    </p>
</div>

to

<div class="col">
    <p class="col-content">
      col Item 1
    </p>
</div><div class="col">
    <p class="col-content">
      col Item 2
    </p>
</div>

Try this snippet:

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

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

.col-content {
  padding: 0.5em;
  background-color: #ddd;
  border: 1px solid #aaa;
  color: #333;
}

<div class="container">
  <div class="col">
    <p class="col-content">
      col Item 1
    </p>
  </div><div class="col">
    <p class="col-content">
      col Item 2
    </p>
  </div><div class="col">
    <p class="col-content">
      col Item 3
    </p>
  </div><div class="col">
    <p class="col-content">
      col Item 4
    </p>
  </div>
</div>

Stack divs side by side without using float left

2 Answers2