サイドパネルがdivの上部に浮かぶのはなぜですか？

Question

私のサイドパネルは正しく正しくフロートしません。一番上のマージンがあるかのように（何らかの理由で）動作し、ページタイトルの横に並ぶことを拒否します。私も<aside>

を使用して、それが応答作るしようとしてる

それはここにする必要があります：私の主な内容はmax-width:1050pxに座っ

、rowSidepanelはwidth:60%の列を作る必要があり、私はsidebarもwidth:27%; float:right;の列をすべてpageAreaにすると仮定しました。

私は要素を調べて、top:0;などを強制しようとしましたが、まだそれ自体は動作していません。

誰かが私が間違っていることを知っていますか？ 。

HTML

<div id="pageArea"> 
    <div class="colPad"> 
     <div class="rowSidepanel"> 
     <!-- InstanceBeginEditable name="main content" --> 
     <div class="breadCrumb"> <a href="/">Home</a> <span style="font: Georgia;"> > </span> Repertoire</div> 
     <h1>Repertoire</h1> 
     <p class="introPara">Intro</p> 
     <p>Main content....</p> 
     <!-- InstanceEndEditable --> 
     </div> 
     <aside id="sidebar"> 
     <div class="sidepanelArea"> Sidepanel </div> 
     </aside> 
    </div> 
    </div> 
    <div class="clearBoth"></div> 

CSS

#pageArea { 
     max-width: 1050px; 
     margin: 0px auto 0px auto; 
     padding: 134px 0px 0px 0px; 
     display: block; 
     background-image:url("/images/common/centered-page-bg.jpg"); 
     background-repeat: no-repeat; 
     background-position: 0% 12%;  
     min-height: 667px; 
     z-index: 1; 
     overflow: hidden; 
     position: relative; 
    } 
    .colPad { 
     padding: 0px 15px 0px 15px; 
    } 
    .rowSidepanel { 
     width: 60%; 
    } 

    aside { 
     float: right; 
     padding: 1%; 
     width: 27%; 
     margin: 0% 0px 20px 0px; 
     background-color:#000; 
     color: white; 
     opacity: 0.7; 
     filter: alpha(opacity=70); /* For IE8 and earlier */ 
    } 
    @media all and (max-width : 799px) { 

     #sidebar { 
      width: 99%; 
      padding: 1% 0px 0px 0px; 
      margin: 0px 0px 0px 0px; 
      border-top: 3px solid #dc1b20; 
      background-color: #FFF; 
      color: black; 
     } 
    } 

Answer 1

あなた.rowSidepanelは、ブロックを表示され、彼の幅の関係なくは、彼はすべての画面上に割り当てています。ただ彼を浮かせる：左;

.rowSidepanel { 
width: 60%; 
float: left; 
} 

Answer 2

はあなたの#breadcrumb、レパートリーヘッダ、および段落要素は、すべてのブロック要素であり、したがって、（ブラウザの幅全体を占有していますあなたのサイドバーを押し下げる）。

他の要素を独自のコンテナdivにグループ化し、その左側にフローさせる必要があります。両方のdiv（左に浮かぶものと右に浮かせるもの）に背景色を適用して、自分が行っていることを視覚化します。

Answer 3

#sideサイドバーの前に#rowSidepanelを変更してみてください。

http://codebins.com/bin/4ldqosu