html - Can I really not use table markup to get two elements to have equal height? -


ok, know using table layout unfashionable. need a layout 2 side-by-side elements, 1 usual height can increase if has taller contents, , other containing image. if first 1 grows taller, want 1 image grow match height.

this can achieve old table. how can divs?

here's i'm trying do:

.body {    width: 748px;    margin: 20px auto;  }  .breaker {    margin: 20px 0;    outline: 1px solid purple;  }  .poll {    background: pink;    width: 248px;    height: 250px;  }  div.poll {    float: left;  }  .story {    float: right;    width: 500px;    background-size: cover;  }
<div class="body">      <table class="breaker">      <tr>        <!-- have variable height depending on content -->        <td class="poll"></td>        <!-- height of should match height of .poll -->        <td style="width:500px;background-image:url(http://lorempixel.com/output/animals-q-c-600-200-1.jpg);background-size:cover;">        </td>      </tr>    </table>      <div class="breaker">      <!-- have variable height depending on content -->      <div class="poll"></div>      <!-- height of should match height of .poll -->      <div class="story" style="background-image:url(http://lorempixel.com/output/animals-q-c-600-200-1.jpg)">      </div>    </div>    </div>

apply display: table-cell both , remove float.

div.poll {     display: table-cell;     /* other styles */ }  .story {     display:table-cell;     /* other styles */ } 

working fiddle


Comments

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

sql - MySQL query optimization using coalesce -

unity3d - Unity local avoidance in user created world -