Question

我试图让我的侧边栏与我的内容对齐，所以他们不会互相推挤。

#website {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 650px;
    background: #822;
    min-height: 100%;
}

#content {
    background-color: #862;
    width: 75%;
    height: 482px;
    clear: both;
    overflow: auto;
    margin-top: 0px;
}

#sidebar {
    float: right;
    background-color: #5c5c3d;
    width: 12.5%;
    height: 91%;
    box-shadow: 10px 10px 5px #888888;
    -webkit-box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.75);
    box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.75);
}

#sidebar p {
    margin-top:0.3em;
    margin-left: 0.3em;
} 

#sidebar h1 {
    margin-top: 0.2em;
    margin-bottom: 0em;
}

#sidebar .shoutbox {
    width: 10%;
    height: 10%;
    background: #fff;
}    `

我的HTML：

http://pastebin.com/zjEWF8Rs

会喜欢这方面的帮助，现在尝试修复它。

Answer 1

你的HTML有点乱。试试这个：

内容： float：left;

<强>页脚明确：两者;

阅读提示：http://learn.shayhowe.com/html-css/positioning-content/

Answer 2

将float:left;添加到您的#content规则中。

JSfiddle

内容正在推动侧边栏，反之亦然。 css＆amp; HTML

2 个答案: