CODEWITHSUNDEEP
htmlcss
user5569995
user5569995

Reputation:

Stack divs side by side without using float left

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>

Upvotes: 2

Views: 41

Answers (2)

Santhosh B
Santhosh B

Reputation: 162

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>

Upvotes: 0

sideroxylon
sideroxylon

Reputation: 4416

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

Upvotes: 1

Related Questions