Float two divs left and one right - html

Question

My code structure looks like this
<div style="height: 100px;
Width: 200px;"> <!-- Container -->
<div style="float: left;
height: 50px;
Width: 100px;
background-color: red;">
</div>
<div style="float: left;
height: 50px;
Width: 100px;
background-color: blue;">
</div>
<div style="float: right;
height: 50px;
Width: 100px;
background-color: green;">
</div>
</div>
But the right position of elements should look like this:
┌──────┬──────┐
│ red │green │
├──────┼──────┘
│ blue │
└──────┘
I cannot change or add any additional code, the only way is with CSS.
How should I float the divs to be in the right order as I mentioned above?
Edit: My code doesn't and can't contain div with clear.

Answer 1

you dont need floating for that. disable all floating using !important to override the inline styles, and then use :nth-of-type() to select the green div and position it absolutely with right and top equal 0;
div {
position: relative;
}
div > div{
float: none !important;
}
div > div:nth-of-type(3) {
position: absolute;
right: 0;
top:0;
}
<div style="height: 100px; Width: 200px;">
<!-- Container -->
<div style="float:left; height: 50px; Width:100px; background-color:red;">
</div>
<div style="float:left; height: 50px; Width:100px; background-color:blue;">
</div>
<div style="float:right; height: 50px; Width:100px; background-color:green;">
</div>
</div>

Answer 2

You can use clear: left on the blue box to push it down and then use negative margin on the green box to push it up.
<div style="height: 100px; Width: 200px;">
<!-- Container -->
<div style="float:left;height: 50px;
width:100px; background-color:red;">
</div>
<div style="float:left;clear:left;
height: 50px; Width:100px; background-color:blue;">
</div>
<div style="float:left; height:50px;
width:100px; background-color:green;margin-top:-50px;">
</div>
</div>

Answer 3

Well this is more like a puzzle instead of a legit question but here goes.
With the proper use of margins and positions in addition to assigning null to clear property one can accomplish your scenario.
<div style="height: 100px; Width: 200px;">
<!-- Container -->
<div style="float:left; height: 50px; Width:100px; background-color:red;"></div>
<div style="float: right; height: 50px; margin-top: 50px;Width:100px; background-color:blue;position: absolute;"></div>
<div style="clear: none;"></div>
<div style=" height: 50px; margin-left: 100px;margin-bottom: 50px;Width:100px; background-color:green;"></div>
</div>
</div>

Answer 4

Keeping the same HTML structure, you could select the divs in CSS using :nth-child(N). In this case you'd just need to update the blue (2) and green (4) boxes, and the one with the clear:both style (3):
div > div:nth-child(2) {
margin-top: 50px;
}
div > div:nth-child(3) {
display: none;
}
div > div:nth-child(4) {
margin-top: -100px;
}
<div style="height: 100px; Width: 200px;">
<!-- Container -->
<div style="float:left; height: 50px; Width:100px; background-color:red;">
</div>
<div style="float:left; height: 50px; Width:100px; background-color:blue;">
</div>
<div style="clear:both;"></div>
<div style="float:right; height: 50px; Width:100px; background-color:green;">
</div>
</div>
Notice that this will work for this particular example. It would be ideal if the container div had an id and use that instead of div >.
For a more generic solution that would work independently of the height of the boxes, you could use transform:translate() like this:
div > div:nth-child(2) {
transform:translate(0%, 100%);
}
div > div:nth-child(3) {
display:none;
}
div > div:nth-child(4) {
transform:translate(0%, -100%);
}
As you can see on this JSFiddle: http://jsfiddle.net/eekhjv3n/1/