css - 居中主要内容右侧的侧边栏

Question

我有这个代码:

http://jsfiddle.net/4axkLm9a/

我希望侧边栏出现在主要内容的右侧，主要内容应居中。

我正在尝试设计此页面，以便主要内容位于页面的中央，并在边栏上显示垂直横幅广告。

有人可以帮忙吗？ :)

谢谢。

这是 HTML:

<div id="header">

     <div id="main">
          <div id="inner">

          </div>
     </div>  
     <div id="sidebar"></div>    
</div>  

<div id="footer"></div>

还有 CSS:

body {
    margin:0; 
    height:100%;
}


#header{
    background-color:#f0f0f5; 
    padding-right:10px; 
    padding-left:10px; 
    font-family:Arial, 
    sans-serif; 
    font-size:14px
}

#main {

    padding-bottom:20px; 
    margin:0 auto; 
    max-width:784px; 
    height:100%;
}

#inner {

    border:1px solid #c9c9c9; 
    padding:20px 20px;  
    color:#44423c; 
    background-color:#fff
}

#sidebar {

    width:200px;
}

#footer {
    background-color:#d3d3d3;
    padding-bottom:18px; 
    padding-top:18px; 
    margin:0 auto; 
    max-width:1030px
    font:normal 14px/1em Arial, sans-serif; 
    color:#727272; 
    text-align:center;
    clear: both;
}

Answer 1

将这些添加到您的代码中。 Example Fiddle

#sidebar {
  float: right;
}

#inner {
  float: left;
  width: 584px;
}

此外，您应该更改代码以使用语义 html，例如:

<header>
</header>

  <main>
    <article>
    </article> 
    <aside>
    </aside>
  </main>

<footer>
</footer>

在开始#main div 之前，您还需要结束#header div。

header

<div id="header">Header</div>

<div id="main">
  <div id="inner">
    Inner Content
  </div>

  <div id="sidebar">
    Sidebar Content
  </div>
</div>

<div id="footer">Copyright Website Blah Blah </div>