29173


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

[code]

           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;
           }
[/code]

[code]

        <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>
[/code]


CC BY-SA 3.0
2016-09-26T10:52:38.713
29147
2016-09-27T04:26:58.023
2016-09-26T13:37:21.357
18525
18525
question
html css
CSSで、会社のロゴを左上、メニューを右上に配置したいのですが


CSSは、`ul.skinny`及び`ul.skinny li`に`width`を設定し、  
`display: table`や`display: table-cell`を削除しました。

メインコンテンツがヘッダに食い込んでいたので、  
`#nav_area`に、`overflow: hidden;`を追加しました。

いかがでしょうか？

[code]

          #nav_area {
            background-color: #eee;
            overflow: hidden;
          }
          #logo_area {
            float: left;
            padding: 15px 30px 0;
          }
          ul.skinny {
            float: right;
            width:650px;
          }
          ul.skinny li {
            display: inline-block;
            vertical-align:middle;
            text-align:center;
            border-left:1px solid white;
            width: 150px;
          }
          ul.skinny li:first-child { border:none; }
          ul.skinny li a {
            display:block;
            text-decoration:none;
          }
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2016-09-27T03:36:16.030
29171
2016-09-27T04:26:58.023
2016-09-27T04:26:58.023
18920
18920
29147
answer


floatを利用する場合、回り込み解除を意識しなければなりません。

解決方法は３パターン程あります。

  1. floatを取り囲む要素の次の要素で回り込み解除する(clearプロパティ)
  2. floatを取り囲む要素にoverflowプロパティを適用して解除
  3. clearfix(:after擬似要素)で解除

### 1\. clearプロパティ

[code]

    div.contents {
       clear: both;
    }
    
[/code]

### 2\. over-flowプロパティ

[code]

    div#nav_area {
       overflow: hidden;
    }
    
[/code]

### 3\. clearfix

[code]

    .clearfix:before, .clearfix:after {
       content: " ";
       display: table;
    }
    
    .clearfix:after {
       clear:both;
    }
    
    //floatを取り囲む要素(#nav_areaにclearfixクラスを適用)
    <div id="nav_area" class="clearfix">
    
[/code]

どれを利用するかは対応するブラウザや、レイアウトの状況によって変わってきますが、現在では3.clearfixが主流になりつつあります。

[こちら](http://qiita.com/shizuma/items/e79702c915a557491884)で、上で説明した各解決手法がより詳しく説明されていますので参考までに。


CC BY-SA 3.0
2016-09-27T04:00:49.623
29173
2016-09-27T04:00:49.623
13097
29147
answer