CSS初心者なのですが、以下のようにhtml、CSSを書きました。
しかし、自分が想定したようなレイアウトとはかけ離れ、完全に崩れています。
どのサイトでも良かったのですが（デザイン参考サイトからこのページを選びました）、このページのように、会社ロゴを左上、メニューを右上、そしてコンテンツをheader部以下に配置したいと思います。
cssのどの部分が問題、または設定が不足しているのでしょうか？
宜しくお願いします。

       div#logo_area { float: left; }
       nav#menu { float: right; }
       ul.skinny { 
        display:table;
        table-layout:fixed;
        width:400px;
        padding-bottom: 40px;
       }
       ul.skinny li {
        display:table-cell;
        vertical-align:middle;
        text-align:center;
        border-left:1px solid white;
       }
       ul.skinny li:first-child { border:none; }
       ul.skinny li a {
        display:block;
        text-decoration:none;
       }
    <html>
     <head>
      <style type="text/css">
      </style>
     </head>
     <body>
      <div id="nav_area">
       <div id="logo_area">
        <span><a href="">株式会社　ラララララ</a></span>
        <figure id="logo" background-image="url()"></figure>
       </div>
       <nav id="menu">
        <ul class="skinny">
         <li id="product">商品案内</li>
         <li id="order"><a href="">注文</a></li>
         <li id="company"><a href="">会社案内</a></li>
         <li id="inquery"><a href="">お問い合わせ</a></li>
        </ul>
       </nav>
      </div>
      
      <div class="contents">
       <div class="" style="background-color:Yellow;">Yellow</div>
       <div class="" style="background-color:green;">Green</div>
       <div class="" style="background-color:blue;">Blue</div>
       <div class="" style="background-color:Red;">Red</div>
      </div>
     </body>
    </html>