2div inside 1

align 2 divs horizontally inside a third container div

by Luca Giuberti

HTML

<div id="container">
  <div>
    <div id ="c1">Div 1</div>
  </div>
  
  <div>
    <div id ="c2">Div 2</div>
  </div>
</div>

CSS

#container > div
{
    display: inline-block;
    border: solid 1px #000;
    width:calc(50% - 2px);
    font-size: 16px;
}
#container
{
    border: solid 1px #ff0000;
    text-align: center;
    margin: 0px auto;
    width: 500px;
    font-size:0;
}

#c1{
  float:right;
  border: solid 1px blue;
  width: 50px;
  //margin-right: 0px;
}

#c2{
  float:left;
  border: solid 1px blue;
  width: 50px;
  //margin-right: 0px;
}