Layout does not work as expected (block level elements, width: 50%)

Question

Can someone explain why the following code is not working?

http://jsfiddle.net/eL9hpcL9/

HTML

<div id="content">
    <div class="sidebar">1</div>
    <div class="sidebar">2</div>
</div>

CSS

#content {
    padding:0;
    margin:0;
}


.sidebar {
    width: 50%;
    display: inline-block;
    margin: 0;
    padding: 0;
}

I would expect sidebokers to be side by side, but that is not the case. I don’t even know where to start. I know what I can use float: left, but how can I get this to work with inline-block?

Answer 1

You need to remove the space between the divs, as it is also counted and does not allow working with a width of 50%.

<div id="content">
    <div class="sidebar">1</div><!--
    --><div class="sidebar">2</div>
</div>

Fiddle: http://jsfiddle.net/eL9hpcL9/1/

Answer 2

"display: inline-block" . , "float: left" "display: inline-block", , . . "margin: 0 -2px;".

Answer 3

So, just create content using the display table, and then the sidebar with the table view and the width you need

#content {
   padding : 0;
   margin : 0;
   display : table;
 }


 .sidebar {
     display : table-cell;
     width: 50%;
     margin: 0;
     padding: 0;
 }