CODEWITHSUNDEEP
htmlcss
Navitua
Navitua

Reputation: 109

Float two divs left and one right

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.

Upvotes: 0

Views: 2437

Answers (4)

Roumelis George
Roumelis George

Reputation: 6746

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>

Upvotes: 1

Banana
Banana

Reputation: 7483

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>

Upvotes: 1

Alvaro Montoro
Alvaro Montoro

Reputation: 29705

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/

Upvotes: 0

JuniorDev
JuniorDev

Reputation: 1200

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>

Upvotes: 0

Related Questions