CODEWITHSUNDEEP
css
praks5432
praks5432

Reputation: 7792

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?

Upvotes: 0

Views: 28266

Answers (2)

bmorgan21
bmorgan21

Reputation: 119

Give this css a try. It has to do with your float and absolute position. Also the last div didn't have a width, so it was easily visible.

.search-form-wrapper {
    border-right: solid 1px #d1d2d4;
    display: inline-block;
    height: 100%;
    max-width: 350px;
    min-height: 900px;
    min-width: 300px;
    position: relative;
    width: 30%;
    background-color:red;
    }

  .results-view-wrapper {
    display: inline-block;
    min-height: 900px;
    height: 100%;
    padding-left: 10px;
    background-color:green;
    }

  .quick-visualization-wrapper {
    display: inline-block;
    background-color:black;
    min-height: 900px;
    height: 100%;
    width:10px;
    }

Upvotes: 0

chris-l
chris-l

Reputation: 2841

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

Upvotes: 5

Related Questions