css - html float stacking order -

i have tree elements i'd floated,

<div class="title">name</div> <div class="description">slogan</div> <div class="navbar"></div> 

css is:

.title, .description{ float:left; } .navbar{ float:right; } 

i'd site description sit underneath title before navbar does.

so, know html wrong, 2 float lefts should in own div , div should have percentage width forces them stack, setting width not i'd it's limiting can entered. ideally need 3 inline elements width can dynamic.

thanks! jesse.

edit:

here's fiddle: https://jsfiddle.net/flw8xac0/1/

as can see nav bar stacks first

just put .description under .navbar , remove float.

<style>     .title {float: left;}     .navbar {float: right;} </style>  <div class="title">name</div> <div class="navbar"></div> <div class="description">slogan</div> 

https://jsfiddle.net/fvqx6z3f/