html5 - Vertical-Align Divs in HTML/CSS -

i'm trying create header consisting of h1 , nav element. want bottom of nav aligned bottom of h1.

here's i've tried:

html

<header>     <h1>web site header</h1>       <nav>          <ul>           <li>one</li>           <li>two</li>           <li>three</li>          </ul>        </nav>  </header> 

css

header {vertical-align: bottom; width: 100%; height: 300px;} h1 {vertical-align: bottom; float: left;} nav {vertical-align: bottom; float: right;} nav ul li {display: inline;} 

i setting exact margins elements, thought cleaner (if it's possible). advice on how fix it/if can done?

thanks!

as clean can get:

<style>     header > * { display: inline-block; }     nav li { display: inline; } </style> 

direct header descendants inline blocks, i.e. don't push surrounding content flow beneath them, yet can still utilize margin , padding property blocks.