カオスのサイドバー - サイドバーをトップナビゲーションバーに揃えるにはどうすればいいですか？

Question

サイドバーをブロガーのトップナビゲーションバーに合わせようとしています。私はサイドバーとボディがそれに応じて調整されるように、信じられないほどシンプルなタグがないと確信しています。

Answer 1

まず、

移動ホームのdiv上記leftbarのDIV。次に、次のCSSを追加してください

#header { 
    overflow: hidden; 
} 

#primary_nav { 
    clear: both; 
} 

#leftbar { 
    margin-top: 52px; 
} 

#single, #home { 
    width: 480px; 
    float: left; 
} 

#central_column { 
    margin-left:0; 
} 

#rightbar { 
    margin-top: 52px; 
} 

また、家のdivの後にclearboth divを削除してください。

Answer 2

1. 移動leftbar divのホーム
2. の上にフロートを追加：家やrightbar
3. がremove clearbothのdivタグがホームのdiv
後、家庭、右のバー
4. 、leftbarするトップ余白を追加し、leftbarために残さここで

Answer 3

は、ページレイアウトで

* { 
 
    box-sizing: border-box; 
 
} 
 
.sidebar { 
 
    width: 30%; 
 
    float: left; 
 
    padding: 20px; 
 
    height: 250px; 
 
    text-align: center; 
 
    background-color: #ccc; 
 
} 
 
.content { 
 
    width: 70%; 
 
    float: left; 
 
} 
 
.navbar { 
 
    height: 50px; 
 
    padding: 20px; 
 
    text-align: center; 
 
    background-color: lightblue; 
 
} 
 
.main { 
 
    height: 200px; 
 
    padding: 20px; 
 
    text-align: center; 
 
    background-color: lightgreen; 
 
} 
 
footer { 
 
    width: 100%; 
 
    height: 50px; 
 
    padding: 20px; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    background-color: lightblue; 
 
}

<aside class="sidebar">Sidebar</aside> 
 
<div class="content"> 
 
\t <nav class="navbar">Navbar</nav> 
 
\t <div class="main">Main</div> 
 
</div> 
 
<footer>Footer</footer>