html - How to align three boxes: two above each other, one on the righthandside of the two

Question

I try to align three boxes (divs) in html5/ css3. Two boxes are stacked above each other on the lefthandside, one should be on the righthandside of these two boxes, stretching over the entire height of the two left boxes.

Unfortunately I cannot align the right box with the other two. It always appeary underneeth the left boxes, yet aligned with the right edge of the bracketing div.

These are the css-definitions I am using to position the boxes:

#leftTop {
    background-color: green;
    color: silver;
    width: 32%;
    height: 110px;
}

#leftBottom {
    background-color: red;
    color: yellow;
    width: 32%;
    height: 540px;
}

#rightAside {
    background-color: blue;
    color: pink;
    width: 60%;
    height: 650px;
    float:left;;
}

I tried several configurations with Display: inline-block, and the float command. But unfortunalely nothing worked.

Does anybody have an idea? Your answers are highly appreciated!!!

Answer 1

像这样。

HTML：

<div id="leftWrapper">
   <div id="leftTop"></div>
   <div id="leftBottom"></div>
</div>
<div id="rightAside"></div>

CSS：

#leftWrapper {
    float:left;
    width: 32%;
    height: 650px;
}
#leftTop {
    background-color: green;
    color: silver;
    width: 100%;
    height: 110px;
}

#leftBottom {
    background-color: red;
    color: yellow;
    width: 100%;
    height: 540px;
}

#rightAside {
    background-color: blue;
    color: pink;
    width: 60%;
    height: 650px;
    float:right;
}

Answer 2

<style>
#left
{
float:left;
 width: 32%;
}
#leftTop {
    background-color: green;
    color: silver;
    width: 100%;
    height: 110px;
}

#leftBottom {
    background-color: red;
    color: yellow;
    width: 100%;
    height: 540px;
}

#rightAside {
    background-color: blue;
    color: pink;
    width: 60%;
    height: 650px;
    float:left;;
}
</style>
<div id="left">
<div id="leftTop"></div>
<div id="leftBottom"></div>
</div>
<div id="rightAside"></div>

Answer 3

这是一种方法：

HTML：

<div class="container">

   <div class="box3">This is box 3</div>

   <div class="box1">This is box 1</div>

   <div class="box2">This is box 2</div>

</div>

CSS：

.container {
  position: relative;
  width: 100%;
  background: #cccccc;
}

.box1 {
  width: 100px;
  height: 100px;
  background: #ff0000;
}

.box2 {
  width: 100px;
  height: 100px;
  background: #00ff00;
}

.box3 {
  position: absolute;
  right: 0px;
  height: 100%;
  background: #0000ff;
}

工作小提琴在这里：http: //jsfiddle.net/Xmg6Z/