CODEWITHSUNDEEP
csshtml
userMod2
userMod2

Reputation: 9000

Align 3 divs side by side with one column having 2

I have a total of 3 divs - how to get them to appear as per the following image.

I can get 2 together using float:left, however withe 3rd one keeps sitting underneath div A.

enter image description here

Any ideas?

Thanks

Upvotes: 0

Views: 1941

Answers (2)

Terry
Terry

Reputation: 66228

Check out masonry.js.

The reason why floats cannot be used in this case is that the float will clear after the tallest element in the row, therefore bumping element C under element A.

Alternatively, you can place A in a sub-parent floated to the left, and B and C in a sub-parent floated to the right. However, this makes dictating the order of items in a responsive/fluid layout difficult. The solution can be simplified as follow:

<div>
    <div class="col">
        <!-- A -->
    </div>
    <div class="col">
        <!-- B + C -->
    </div>
</div>

For the CSS:

.col { float: left; width 50%; }

Upvotes: 2

Michal Przybylowicz
Michal Przybylowicz

Reputation: 1668

Wrap B and C in additional div similar to A (with float left as well)

Upvotes: 2

Related Questions