How to force the height of the container to expand according to this content

If we check the code, you can see what div.header

hasheight: 0px;

Take a look at the image below:

I want mine to div

be sized with three elements .c1

, .c2 and

.c3`

How can I solve this problem?
Hope we managed to explain my problem.

HTML:

   <div class="container">
    <div class="header">            
        <div class="c1">asdsadsadsadasda</div>
        <div class="c2">asdasdas</div>
        <div class="c3">sadsada</div>            
    </div>
</div>

      

        
        
        
      

    

CSS

.container
{
    width:100%;
    height:500px;
    background:red;

}
.c1
{
    width:auto;
    height:auto;
    background:yellow;
}

.c2
{
    width:auto;
    height:auto;
    background:gray;
}


.c3
{
    width:auto;
    height:auto;
    background:orange;
}
.c1,.c2,.c3{width:33%;float:left;}

.header{width:70%;height:auto;margin:0 auto;background:blue;}

      

        
        
        
      

    

JSFiddle