CODEWITHSUNDEEP
htmlcsscss-floatheight
Tom Groot
Tom Groot

Reputation: 1180

Floated div not same height as parent

I want to make two divs next to each other inside a parent div

Like this:

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

It only works when the parent got a fixed height, but I want the parent to be auto in order the content to fit perfectly inside the parent.

When the parent doesn't got a fixed height:

|-------------------------|----------|
|                         | 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>

Checkout the fiddle http://jsfiddle.net/LQQTm/1/

Upvotes: 0

Views: 877

Answers (2)

Annie
Annie

Reputation: 9

I had to do the same, so I did it like that:

<div class="pink"> <div class="red"><p>red's content</div></div> <p>pink's content</p> </div>

You can do it only when you are sure that the red div is larger then the pink one. the another way (if the heights can be different) is with jQuery:

if($('.pink').height() < $('.red').height()){ $('.pink').height($('.red').height()); } else { $('.red').height($('.pink').height()); }

Good luck!

Upvotes: 0

Itay
Itay

Reputation: 16777

You can use the table-cell and table displays.

jsFiddle Demo

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

Upvotes: 1

Related Questions