two divs next to each other with no fixed width elements [duplicate]

Question

I am currently stunned by the overwhelming amount of questions available on the subject "two divs next to each other". As I am trying to create the same I have been reading now for hours and trying every solution that I can Google. But with no results. So I am hoping that the SO userbase can help me.

I have 2 divs one with the header(logo) which can be any size(Clients upload their own logo). And another div with the navigation(menu) which is also been setup by the client him/herself. Because the clients create the content(logo+menu) I can't set any width element in px or other(as far as i know).

What I want to achieve is that the header div is just as big so that it fits either the logo(image) or logo(text). And that the navigation fills up all the other available space to the right.

Please see this fiddle: http://jsfiddle.net/nSY4P/

Thanks for the help in advance.

<style>
.head-area{width:100%;}
.header{float:left;background:#fe0000;}
.navigation{float:left;background:#feda08;}
.head-area{clear:both;}
</style>

<div class="head-area">
 <div class="header">CLIENT LOGO</div>
 <div class="navigation">ITEM 1 | ITEM 2 | ITEM 3 | ITEM 4 | ITEM 5</div>
 <div class="head-area-clear"></div>
</div>

Answer 1

No need to use display: flex nor display: table-cell.

Just remove .navigation's floating, and it will fill all remaining space:

.head-area{width:100%; overflow:hidden;}
.header{float:left;background:#fe0000;}
.navigation{overflow:hidden; background:#feda08;}
.head-area{clear:both;}

Demo