Float Two Divs Left And One Right

My code structure looks like this But the right position of elements should look like this: ┌──────┬──────┐ │ red │green │ ├─────

Solution 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;
}

<divstyle="height: 100px; Width: 200px;"><!-- Container --><divstyle="float:left; height: 50px; Width:100px; background-color:red;"></div><divstyle="float:left; height: 50px; Width:100px; background-color:blue;"></div><divstyle="float:right; height: 50px; Width:100px; background-color:green;"></div></div>

Solution 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.

<divstyle="height: 100px; Width: 200px;"><!-- Container --><divstyle="float:left;height: 50px; 
                    width:100px; background-color:red;"></div><divstyle="float:left;clear:left;
                    height: 50px; Width:100px; background-color:blue;"></div><divstyle="float:left; height:50px; 
                    width:100px; background-color:green;margin-top:-50px;"></div></div>

Solution 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.

<divstyle="height: 100px; Width: 200px;"><!-- Container --><divstyle="float:left; height: 50px; Width:100px; background-color:red;"></div><divstyle="float: right; height: 50px; margin-top: 50px;Width:100px; background-color:blue;position: absolute;"></div><divstyle="clear: none;"></div><divstyle=" height: 50px; margin-left: 100px;margin-bottom: 50px;Width:100px; background-color:green;"></div></div></div>

Solution 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;
}

<divstyle="height: 100px; Width: 200px;"><!-- Container --><divstyle="float:left; height: 50px; Width:100px; background-color:red;"></div><divstyle="float:left; height: 50px; Width:100px; background-color:blue;"></div><divstyle="clear:both;"></div><divstyle="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/