对齐侧边栏

Question

我试图将 section[主要内容] 与 aside[侧边栏] 分开。我想要的是绿色右侧的蓝色方框。我尝试使用 overflow: hidden; 和 float = right [in aside] 和 float = left [in section]。然而 footer 被移动了。

代码： http://jsfiddle.net/q48cospu/1/

谁能找到代码中的问题？

Answer 1

尝试向右漂移，向左漂移，然后

clear:both;

在页脚上。

像这样：fiddle

Answer 2

我想你需要这样的东西： http://jsfiddle.net/q48cospu/3/

@import url("font-awesome.min.css");
@import url("http://fonts.googleapis.com/css?family=Roboto+Condensed");
@import url("http://fonts.googleapis.com/css?family=Open+Sans");

header, nav, aside, section, footer
{
    display: block;
    float: left;
    position: relative;

}

body
{
    font-family: 'Open Sans', sans-serif;
  background: #f0f0f0;
  font-weight: 300;
    margin: 0;
    padding: 0;
}

header
{
    background-color:yellow;
    width: 100%;
}

nav
{
    background-color:orange;
    width: 100%;
}

section
{
    background-color:yellowgreen;
    width: 70%;
    min-height: 15em;
}

footer
{
    background-color:deepskyblue;
    width: 100%;
}

article
{

}

aside
{
    background-color:blue;
    width: 26%;
    color: white;
    min-height: 15em;
}

.box-header
{
border: 1px solid none;
border-radius: 10px 10px 0px 0px ;
-moz-border-radius: 10px 10px 0px 0px ;
-webkit-border-radius: 10px 10px 0px 0px ;
box-shadow: 1px 2px 4px rgba(0,0,0,.4);
padding: 1%;
}

.box-nav
{
border: 1px solid none;
border-radius: 0px 0px 10px 10px ;
-moz-border-radius: 0px 0px 10px 10px ;
-webkit-border-radius: 0px 0px 10px 10px ;
box-shadow: 1px 2px 4px rgba(0,0,0,.4);
padding: 1%;
}

.box-section
{
border: 1px solid none;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 1px 2px 4px rgba(0,0,0,.4);
padding: 1%;
}

.box-sidebar
{
border: 1px solid none;
border-radius: 5px ;
-moz-border-radius: 5px ;
-webkit-border-radius: 5px ;
box-shadow: 1px 2px 4px rgba(0,0,0,.4);
padding:1%;
}

.box-footer
{
border: 1px solid none;
border-radius: 5px ;
-moz-border-radius: 5px ;
-webkit-border-radius: 5px ;
box-shadow: 1px 2px 4px rgba(0,0,0,.4);
padding: 1%;
}

Answer 3

在这里，我想这就是你想要的

http://jsfiddle.net/DIRTY_SMITH/q48cospu/11/

@import url("font-awesome.min.css");
@import url("http://fonts.googleapis.com/css?family=Roboto+Condensed");
@import url("http://fonts.googleapis.com/css?family=Open+Sans");

header, nav, aside, section, footer
{

}

body
{
    font-family: 'Open Sans', sans-serif;
  background: #f0f0f0;
  font-weight: 300;

}

header
{
    background-color:yellow;
}

nav
{
    background-color:orange;
}

section
{
    background-color:yellowgreen;
    width: 60%;
    margin-left: 10%;

}

footer
{
    background-color:deepskyblue;
}

article
{

}

aside
{
    background-color:blue;
    width: 20%;
}

.box-header
{
border: 1px solid none;
border-radius: 10px 10px 0px 0px ;
-moz-border-radius: 10px 10px 0px 0px ;
-webkit-border-radius: 10px 10px 0px 0px ;
box-shadow: 1px 2px 4px rgba(0,0,0,.4);
padding: 5px;
}

.box-nav
{
border: 1px solid none;
border-radius: 0px 0px 10px 10px ;
-moz-border-radius: 0px 0px 10px 10px ;
-webkit-border-radius: 0px 0px 10px 10px ;
box-shadow: 1px 2px 4px rgba(0,0,0,.4);
padding: 5px;
}

.box-section
{
border: 1px solid none;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 1px 2px 4px rgba(0,0,0,.4);
padding: 5px;
float: left;
}

.box-sidebar
{
border: 1px solid none;
border-radius: 5px ;
-moz-border-radius: 5px ;
-webkit-border-radius: 5px ;
box-shadow: 1px 2px 4px rgba(0,0,0,.4);
padding: 5px;
float: left;
}

.box-footer
{
border: 1px solid none;
border-radius: 5px ;
-moz-border-radius: 5px ;
-webkit-border-radius: 5px ;
box-shadow: 1px 2px 4px rgba(0,0,0,.4);
padding: 5px;
clear:both;
}

对齐侧边栏

Alignment a Sidebar

html

css

alignment