Vertical align middle table cell responsive with text

Question

I want to centre content in a div using the table approach --- see first section here

This is all good, however I have an issue.

I have 2 divs, each taking up 50% width. The left div contains an image which is px` in length. The right div contains text. I can set a height to the div containing the text and it works, however, when I make the screen smaller it is not responsive. Can anyone tell me, if there is one, the technique to decrease the height of the div with the text in it as the screen reduces in size?

I want to retain the 2 divs side by side, and reduce the height of the div on the right as the screen gets smaller, at the same rate that the image on the right decreases in size.

See jsfiddle HERE and code below to demonstrate:

HTML

<div class="left">
   <img src="http://www.profightdb.com/img/wrestlers/thumbs-600/1414330df8brethart.jpg">
</div>

<div class="right">
  <div class="table">
    <div class="table-cell">
      <p>Test</p>
      <p>Lorem ipsu se skio sas nie lorem dtakorem ipsu se skio sas nie lorem dtak lorem ipsu se skio sas nie lorem dtak</p>
    </div>
  </div>
</div>

CSS

img {
  width: 100%;
}

.left, .right {
  float: left;
  width: 50%;
}

.table {
  height: 400px;
  display: table;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
}

Answer 1

Why do u use table for this? Use a flex.

 img { width: 100%; } .left, .right { width: 50%; /* float: left; */ } /* .table { height: 400px; display: table; } .table-cell { display: table-cell; vertical-align: middle; } */ body { display: flex; align-items: center; } 

 <div class="left"> <img src="http://www.profightdb.com/img/wrestlers/thumbs-600/1414330df8brethart.jpg"> </div> <div class="right"> <div class="table"> <div class="table-cell"> <p>Test</p> <p>Lorem ipsu se skio sas nie lorem dtakorem ipsu se skio sas nie lorem dtak lorem ipsu se skio sas nie lorem dtak</p> </div> </div> </div> 

Answer 2

Try flexbox . Updated fiddle here .

 .wrapper { display: flex; align-items: center; } .child { flex: 1; } img { width: 100%; } 

 <div class="wrapper"> <div class="child"> <img src="http://www.profightdb.com/img/wrestlers/thumbs-600/1414330df8brethart.jpg"> </div> <div class="child"> <p>Test</p> <p>Lorem ipsu se skio sas nie lorem dtakorem ipsu se skio sas nie lorem dtak lorem ipsu se skio sas nie lorem dtak</p> </div> </div> 

Answer 3

I have find the following revised html structure is working

<div class="table">
    <div class="table-cell">
      <img src="http://www.profightdb.com/img/wrestlers/thumbs-600/1414330df8brethart.jpg">
    </div>
    <div class="table-cell">
      <p>Test</p>
      <p>Lorem ipsu se skio sas nie lorem dtakorem ipsu se skio sas nie lorem dtak lorem ipsu se skio sas nie lorem dtak</p>
    </div>
</div>

while you have to change the height of .table to height: auto;

Or maybe you would like to use the unit vh of height which represent the viewpoint height: try height: 50vh;

Answer 4

 <div class="table clearfix">
        <div class="left">
           <img src="http://www.profightdb.com/img/wrestlers/thumbs-600/1414330df8brethart.jpg">
        </div>

        <div class="right">
            <div class="table-cell">
              <p>Test</p>
              <p>Lorem ipsu se skio sas nie lorem dtakorem ipsu se skio sas nie lorem dtak lorem ipsu se skio sas nie lorem dtak</p>
            </div>
        </div>
    </div>
 .clearfix:after {
                    visibility: hidden;
                    display: block;
                    font-size: 0;
                    content: " ";
                    clear: both;
                    height: 0;
                }
                .clearfix {
                    display: inline-block;
                }
                * html .clearfix {
                    height: 1%;
                }
                .clearfix {
                    display: block;
                }
                .table {
                    width: 1000px;
                    margin: auto;
                }
                .left img {
                    width: 100%;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                }
                .left,
                .right {
                    float: left;
                    width: 50%;
                    position: relative;
                    height: 100%;
                }
                .right {
                    display: table;
                }
                .table-cell {
                    display: table-cell;
                    vertical-align: middle;
                }

This code may help you.

Answer 5

I updated your fiddle: https://jsfiddle.net/9bjan951/4/

Basically what I've done:

• Added a wrapper-element
• Clear the floating, so the wrapper gets a height
• Set the right column to absolute position and give it always 100% height of its parent
• Set the right table to 100% height
• For narrow screens the text will overflow with a scrollbar

Most of the magic happens here:

.right {
  height: 100%;
  background: #c54a8d;
  position: absolute;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
  overflow: hidden;
  overflow-y: auto;
} 

I hope this helps.