html - 需要实现特定的CSS Layout

Question

首先对那个糟糕的标题感到抱歉。

好吧..我需要实现这个布局:

http://imgur.com/HmEf7lD,f4qUked#1

到目前为止我得到了这个:

http://imgur.com/HmEf7lD,f4qUked#0

我的问题是，我可以将 leftBar、Content、rightBar 彼此对齐。但我希望条形图直接到达底部，并在它们之间(在内容下方)我的 3 个框彼此相邻。

我怎样才能完成这件事？感谢您的每一个回复!

这是第一次尝试:

/* Contains everything below */
.webContainer { 
    width: 100%;
}

/* Side Bars */
.leftBar, .rightBar{
    width: 15%;
    height: 600px;
    float: left;
}

/* Slider between 2 Bars */
.slider {
    width: 70%;
    float: left;
}

/* Boxes below Slider */
.firstBox, .secondBox, .thirdBox {
    width: 20%;
    height: 200px;
    float: left;

}

HTML 看起来像这样:

<div class="webContainer">

   <div class="leftBar">
     //leftBar Content
   </div>

   <div class="slider">
      //Slider code
   </div>

   <div class="rightBar">
     //rightBar Content
   </div>

   <div class="fistBox">
     //Content
   </div>
   <div class="secondBox">
     //Content
   </div>
   <div class="thirdBox">
     //Content
   </div>

</div>

感谢您的帮助!

编辑:感谢您的回答，我已经标记了我认为最好的答案。另外，我发布的 HTML 只是一段代码，供你们了解我在构建什么。我正在使用 PHP，每个部分都在不同的 PHP 文件中。所以实际代码更“复杂”——这个应该只是给出一个想法。

Answer 1

固定:JSFiddle

将 .rightBar 向右浮动

.rightBar {
    float: right;
}

并删除 html 中的拼写错误。 .firstBox 而不是 .fistBox。 (注意 R)。