How do I arrange this in CSS? - css

Question

I am not sure how to properly phrase this question, so bear with me while I try and explain.
I am working on a layout that is two columns but with three divs and using the Bootstrap framework. The first div is pushed to the right, the second div is pulled to the left. The third div I want it pulled to the right and set flush to the bottom of the first div. Right now the top of the third div is sitting at the bottom of the second div.
The reason why I want it laid out this way is so when viewing on a desktop there will be two columns but when viewing on a mobile devices it will shrink down to one column and the third div will be below the content in the second div.
<div class="container">
<div class="div1">DIV1. This will be on the right</div>
<div class="div2">DIV2. This will be on the left</div>
<div class="div3">DIV3. This will be on the right</div>
</div>
Full CSS here: http://jsfiddle.net/m8z37q0y/1/

Answer 1

Remove the position: relative; properties or add it to the container as well. Then actually use float: right; on div1 and div3 and remove the right/left properties:
.container {
width: 400px;
height: 250px;
background: #ccc;
}
.div1 {
width: 100px;
height: 100px;
background: #eee;
float: right;
}
.div2 {
width: 300px;
height: 200px;
background: #aaa;
float: left;
}
.div3 {
width: 100px;
height: 100px;
background: #777;
float: right;
}
See the DEMO

Answer 2

http://jsfiddle.net/m8z37q0y/7/
.container {
width: 400px;
height: 250px;
background: #ccc;
}
.div1 {
width: 100px;
height: 100px;
background:green ;
left: 300px;
float: right;
}
.div2 {
width: 300px;
height: 200px;
background: blue;
right: 100px;
float: left;
}
.div3 {
width: 100px;
height: 100px;
background: red;
float: right;
}

Answer 3

View Demo jsFiddle
Remove position: relative property in .div2{...} and .div3 {...} class.
Change property value float: left to float: right in .div3{...} class to archive this.
.div2 {
width: 300px;
height: 200px;
background: #aaa;
right: 100px;
float: left;
position: relative; /* Remove this */
}
.div3 {
width: 100px;
height: 100px;
background: #777;
left: 300px;
float: left; /* Set float Right */
position: relative; /* Remove this */
}

Answer 4

Look this demo: http://jsfiddle.net/abruzzi/m8z37q0y/8/
You should remove the all css property below:
position: relative; left...
and set correct float property like below:
.div1 {
width: 100px;
height: 100px;
background: #eee;
float: right;
}
.div2 {
width: 300px;
height: 200px;
background: #aaa;
float: left;
}
.div3 {
width: 100px;
height: 100px;
background: #777;
float: right;
}

Answer 5

<div class="container">
<div class="div1">DIV1. This will be on the right</div>
<div class="div2">DIV2. This will be on the left</div>
<div class="div3">DIV3. This will be on the right</div>
</div>
.container {
width: 400px;
height: 250px;
background: #ccc;
}
.div1 {
width: 100px;
height: 100px;
background: #eee;
left: 300px;
float:right;
}
.div2 {
width: 300px;
height: 200px;
background: #aaa;
right: 100px;
float:left;
}
.div3 {
width: 100px;
height: 100px;
background: #777;
left: 300px;
float:right;
}