CSS 2 columns 50% without floats

Question

I want to set a 2 column div with width of 50% each without using any floats. I set the display property to inline-block. I get it right with 49% width but when I go to 50% the second div goes down.

  #first{
       background-color: aqua;
       display:inline-block;
       width: 50%;
            
   }
   #second{
       background-color: blueviolet;
       display: inline-block;
       width: 50%;
               
   }

I even tried to change box-sizing but it didn't work

Any ideas??

score -1 · Answer 1 · answered Mar 12 '22 at 08:02

-1

To do this use flex.

.container {
  display: flex;
}

.first,
.second {
  flex: 1;
  height: 60px;
}

.first {
  background: red;
}

.second {
  background: blue;
}

<div class="container">
  <div class="first"></div>
  <div class="second"></div>
</div>

answered Mar 12 '22 at 08:02

Vugar Taghiyev

413
3
9

Please don't answer obvious duplicate questions. Instead try to find the question it's a duplicate of, and vote to close as duplicate. – connexo Mar 12 '22 at 08:06

CSS 2 columns 50% without floats

1 Answers1