Q:

Display inline-block not working

So I have html like this
    <div class="search-form-wrapper">
</div>
<div class="results-view-wrapper">
</div>
<div class="quick-visualization-wrapper"/>

This is the CSS for them -
  .search-form-wrapper {
    border-right: solid 1px #d1d2d4;
    display: inline-block;
    float: left;
    height: 100%;
    max-width: 350px;
    min-height: 900px;
    min-width: 300px;
    position: relative;
    width: 30%;
    }

  .results-view-wrapper {
    display: inline-block;
    height: 100%;
    position: absolute;
    padding-left: 10px;
    }

  .quick-visualization-wrapper {
    display: inline-block;
    }

The first two divs are displayed next to each other, but the last div appears behind the results-view-wrapper, (so next to the search-form-wrapper). I thought it might be because results-view-wrapper is position absolute, but when I took that out the div just moved downwards and was still behind results-view-wrapper.
How do I make it so that it appears next to the results-view wrapper?

A:

You are not specifying the width of the second and third divs. You need to do it.
Why you have position:absolute on that div ? Also, don't use float on an element with display:inline-block.
http://plnkr.co/edit/6wLokBiZUw33SKmZtjiC?p=preview

