html - フローティング div が親と同じ高さではありません

Question

親 div 内で 2 つの div を隣り合わせに作成したい

このような：

<--------- 70% ----------> <-- 30% -->
|-------------------------|----------|
|                         |          |
|                         |          |
|-------------------------|----------|

親の高さが固定されている場合にのみ機能しますが、コンテンツが親の内部に完全に収まるように、親を自動にしたいと考えています。

親の高さが固定されていない場合:

|-------------------------|----------|
|                         | content  |
|        content          |----------|
|                         |
|-------------------------|

CSS:

.parent {
  background-color: blue;
  height: auto;
}

.biginside {
  background-color: pink;
  height:100%;
  width: 70%;
  float: left;
}

.smallinside {
  background-color: red;
  height: 100%;
  width: 30%;
  float: left;
}

<div class="parent">

  <div class="biginside">
    <p>content</p>
    <p>content</p>
  </div>

  <div class="smallinside">
    <p>content<p>
  </div>

</div>

フィドルをチェックアウト http://jsfiddle.net/LQQTm/1/

Answer 1

table-cellおよびtableディスプレイを使用できます。

jsFiddle デモ

.pink {
    width: 70%;
    display: table-cell;
}
.blue {
    display: table;
    width: 100%
}
.red {
    width: 30%;
    display: table-cell;
}