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 */ }
Comments
Post a Comment