为什么我的侧板浮动在div的顶部?

时间:2016-11-28 19:05:08

标签: css

我的侧板没有正确浮动。它起作用(由于某种原因)就好像有一个上边距,它拒绝在页面标题旁边对齐。

我还尝试使用<aside>

使其响应

它应该在这里:

Arrow pointing to where the sidepanel should be

我的主要内容位于max-width:1050pxrowSidepanel应列出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;
        }
    }

3 个答案:

答案 0 :(得分:5)

您的.rowSidepanel会显示块,无论他的宽度如何,都会将其分配到所有屏幕。让他漂浮:左;

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

答案 1 :(得分:2)

你的#breadcrumb,repertoire header和paragraph元素都是块元素,因此占据浏览器的整个宽度(并按下侧边栏)。

您应该将这些其他元素分组到自己的容器div中并流向左侧。将背景颜色应用于两个div(左侧浮动,右侧浮动)以显示您正在做的事情。

答案 2 :(得分:0)

尝试在#sidebar之前更改div顺序#rowSidepanel。

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