Floated div not same height as parent

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:
|-----|--|
|conte|nt|
|conte|--|
|conte|
|-----|
CSS:
.biginside {
background-color: pink;
height:100%;
width: 70%;
float: left;
}
.parent {
background-color: blue;
height: auto;
}
.smallinside {
background-color: red;
height: 100%;
width: 30%;
float: left;
}
HTML:
<div class="parent"><div
class="biginside"><p>content</p><p>content</p></div><div
class="smallinside">content</div></div>
Checkout the fiddle http://jsfiddle.net/LQQTm/1/