How can I vertically center a fluid left column and a floated right column?

Question

In my project, there are two columns. The left contains an image that is, at maximum, 100% of the left column's width with an auto height. The right varies in width while the left one fills up the remaining space. This uses the technique described in JackJoe's answer to a previous question.

What I want to do now is vertically center the column with the smaller height. There are times when the right column or the left column is shorter, depending upon the width of the window. I have tried using

{
  position: relative;
  top: 50%;
  transform: translateY(-50%); //with more prefixes
}

However, for some reason the top: 50% part does not work at all. Here is my current code, without the vertical centering attempt (this works as expected):

 $(document).ready(function() { $("#right").click(function() { $(this).toggleClass("wide"); }); }); 

 #container { width: 100%; border: 1px solid red; height: auto; overflow: hidden; } #right { float: right; border: 1px solid green; width: 100px; transition: 1s width; } #left { border: 1px solid green; width: auto; overflow: hidden; } #left img { max-width: 100%; height: auto; } #right.wide { width: 300px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="container"> <div id="right"> Click Me </div> <div id="left"> <img src="http://placehold.it/440x120"/> </div> </div> 

EDIT: I forgot to specify -- the width of the right column needs to depend upon the widths of it's contents, just like the width of an inline-block element element would with no set width. I just used exact widths in the demo to show the fluidity of the columns.

Answer 1

You could use CSS tables to get the desired result. Apply display: table-cell to the left and right elements and vertical-align: middle to vertically center the content.

This is a pretty robust approach and works in most modern browsers.

The major advantage is that you don't need any JavaScript/jQuery to adjust the layout.

Update: If you have optional elements that show/hide on the right, the vertical centering will still work.

 $(document).ready(function() { $("#right").click(function() { $(this).toggleClass("wide"); }); }); 

 #container { width: 100%; border: 1px solid red; height: auto; display: table; } #right { display: table-cell; vertical-align: middle; border: 1px solid green; width: 200px; transition: 1s width; } #left { display: table-cell; vertical-align: middle; border: 1px solid green; width: auto; } #left img { width: 100%; height: auto; display: block; } #right.wide { width: 300px; } #right p.extra { display: none; } #right.wide p.extra { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div id="left"> <img src="http://placehold.it/440x120" /> </div> <div id="right"><p><b>Click Me</b></p> <p class="extra">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing. Pellentesque consequat laoreet sagittis. Sed sit amet erat augue. Morbi consectetur, elit quis iaculis cursus, mauris nulla hendrerit augue, ut faucibus elit sapien vitae justo. In a ipsum malesuada nulla rutrum luctus. Donec a enim sapien. Sed ultrices ligula ac neque vulputate luctus. Suspendisse pretium pretium felis, in aliquet risus fringilla at. Nunc cursus sagittis commodo.</p> </div> </div> 

Answer 2

You could use display: table-cell to achieve the vertical alignment. This uses however different HTML (and CSS).

#container {
 width: 100%;
 border: 1px solid red;
 height: auto;
 overflow: hidden;
    display: table
}

#right {
 border: 1px solid green;
 width: 100px;
 transition: 1s width;
    display: table-cell;
    vertical-align: middle;
}

#left {
 border: 1px solid green;
 width: auto;
 overflow: hidden;
    display: table-cell;
}

Here's a fiddle: http://jsfiddle.net/woj3s8La/