Vertical alignment of divs

Question

I have three divs. Two divs should come side by side and the third one should come after it. The size of all the divs vary.

Structure of a div --

<div style="display:inline">
  <table style="visibility:visible;width:100%;table-layout-fixed">
  </table>
</div>

So if div1 is larger than div2, then div3 is coming below div2

      ---------------------------------------
       --------------             ----------
                                   Div 2
        Div 1                     ----------
                                  ----------
       --------------              Div 3
                                  ----------
      ---------------------------------------

But if div1 is smaller than div2, then div3 is not coming immediately after div1 This is how it is aligning

      ---------------------------------------
       --------------             ----------
                                   Div 2
        Div 1                    
       --------------


       -------------              -----------
        Div 3      
       -------------            
      ----------------------------------------

I want it to be like the following --

      ---------------------------------------
       --------------             ----------
                                   Div 2
        Div 1                    
       --------------
       --------------
        Div 3
       --------------
                                  -----------     
      ----------------------------------------

You can use http://stackoverflow.com/questions/22680215/layout-float-different-height-blocks-with-css for solution, but order of divs will be different than yours. — Philip Dernovoy, Jun 18 '15 at 08:26

score 0 · Answer 1 · answered Jun 18 '15 at 12:04

You could use Display Table for that !

I made an exemple for you, look here :

HTML :

<div class="one">
        <p>Things</p>
        <p>Things</p>
        <p>Things</p>
</div>

CSS :

div p {
        margin: 0;
        padding: .5em;
        color: #fff;
        background: maroon;
}

.one{
    display: table;
    table-layout:fixed;
    width: 100%;
}

div.one p:last-child {
  display:table-cell;
  vertical-align : middle
}

http://codepen.io/AxelCardinaels/pen/oXGjpB

Vertical alignment of divs

1 Answers1