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

Question

Could somebody explain why the following code doesn't work?

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 the sidebars to be side by side, but they are not. I don't even know where to start. I know I can use float: left, but how can I get this working with inline-block?

emmanuel · Accepted Answer · 2014-10-23T14:34:02.267

6

You have to remove white space between divs as it is also counted and don't let 50% width work.

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

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

edited Oct 23 '14 at 14:34

answered Oct 23 '14 at 14:24

emmanuel

9,607
10
25
38

1

Wow, almost speechless. – Damien Roche Oct 23 '14 at 14:28
When you know ;) cheers. – Damien Roche Oct 23 '14 at 14:29
2

@DamienRoche http://css-tricks.com/fighting-the-space-between-inline-block-elements/ – DaniP Oct 23 '14 at 14:30
1

That's a really interesting solution, but it does require semantic knowledge of the HTML. I think the `font-size:0` on the parent is the more commonly used one, but has many of the same non-sensical caveats. This is elegant in its own way. I like it. – Josh Burgess Oct 23 '14 at 14:36
I don't think I've run into this problem before because I've been using template engines, which I imagine are stripping whitespace. – Damien Roche Oct 23 '14 at 15:09
Divs without float aren't used so much, that's why it's not a common issue. – emmanuel Oct 23 '14 at 15:15

score 0 · Answer 2 · answered Oct 23 '14 at 14:33

0

"display: inline-block" property adding an extra space. Much better if you use the "float: left" instead of "display: inline-block", but you can add a negative margin to the left and right to kill the extra spaces. eg. "margin: 0 -2px;".

answered Oct 23 '14 at 14:33

You really don't want to start introducing negative margins on layout just to accommodate white-space. It's a bad precedent. Especially since white-space can render differently based on the font being displayed on a user's screen. – Josh Burgess Oct 23 '14 at 14:38

score 0 · Answer 3 · answered Oct 23 '14 at 14:48

So just style the content with display table and then the sidebar with display as table-cell and the width you need

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


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

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

html

css

3 Answers3