HTML/CSS: Display: block with a float or inline-block

Question

I have a basic issue.
I want two div's next to each other. I would usually do this with a display:block; and a float:left; on both elements.

What I try to do now is display:inline-block; and a width:60% for the left div and a width:40% for the right div.

The problem is that the div's won't align because one of the is to big. If I reduce one in size it works but then there is a lot of space around the second div.
Here is a Fiddle:

Can anyone see what I do wrong?

M.

score 3 · Accepted Answer · answered Jan 06 '16 at 16:32

Inline elements are sensitive to white space in your code. Remove the white space:

<div class="wrapper">
  <div id="header">
    Header
  </div><div id="container">
    Container
  </div><div class="sidebar">
    Sidebar
  </div><div id="footer">
    Footer
  </div>
</div>

jsFiddle example

score 2 · Answer 2 · answered Jan 06 '16 at 16:32

with inline-block white space will effect the flow of your document.

Remove the white space on these elements.

.wrapper{
 margin: 0 auto;
 text-align: left;
 background:#000000;
}

#header{
 width: 100%;
 background:#00FF73;
}
#container{
 width: 60%;
 display: inline-block;
 vertical-align: top;
 background:#FF0004;
}

.sidebar{
    width: 40%;
    display: inline-block;
 background:#0037FF;
}

#footer{
 width: 100%;
 background:#B400F9;
}

<div class="wrapper">
 <div id="header">
    Header
 </div>
  <div id="container">
  Container
  </div><!--
  --><div class="sidebar">
   Sidebar
 </div>
  <div id="footer">
      Footer
 </div>
  </div>

HTML/CSS: Display: block with a float or inline-block

2 Answers2