Div collapses when it has text

Question

I have a problem unpacking a div. When I add some volume of text, it collapses from the parent div. Here is the HTML code

    .container {
      width:80%;
      height:50%;
      background-color:#eee;
      padding: 30px
    }

    html,body {
      height:100%;
    }

    .chart {
      background: red;
      width: 30px;
      margin-right: 10px;
      display: inline-block;
    }

    <div class="container">
       <div class="chart" style="height: 10%"></div>
       <div class="chart" style="height: 20%"></div>
       <div class="chart" style="height: 70%">test</div>
       <div class="chart" style="height: 100%"></div>
    </div>

Run codeHide result

And the demo: http://jsfiddle.net/5YukJ/485/

Answer 1

Use vertical-align: bottom;

.chart {
    background: red;
    width: 20px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: bottom;
}

Answer 2

You probably understand that in your example the position of the columns depends on the highest column, in your case this is the last,

If I had to draw some columns in this situation, I would go for flex:

.container {
      width:80%;
      height:50%;
      background-color:#eee;
      padding: 30px;
      display: flex;
      align-items: flex-end;
    }

    html,body {
      height:100%;
    }

    .chart {
      background: red;
      flex: 0 0 30px;
      margin-right: 10px;
      display: inline-block;
    }

<div class="container">
       <div class="chart" style="height: 10%"></div>
       <div class="chart" style="height: 20%"></div>
       <div class="chart" style="height: 70%">test</div>
       <div class="chart" style="height: 100%"></div>
    </div>

Run codeHide result

which suggests support for browser validation.

Answer 3

The best solution uses vertical-align, as @FelixAJ said. The problem is mainly related to the overflow that causes the inner text. Using vertical-align, you override this default behavior. In addition, I recommend using min-widthinstead widthto avoid overflow. With this approach, the width of the bar will increase depending on the internal text.