wordpress - CSS Two Boxes with same height -
all want make right column's height (and images in it) depend on left. left one's height keeps changing based on width , right column's height changes never equal.
css
div.home-bottomleft, div.home-bottomright { float:left; display:table-row; padding:10px 0; } div.home-bottomleft { width:45.3%; background: url(/wp-content/themes/jdesign/images/div-separator.png) right no-repeat; } div.home-bottomright { width:54.7%; }
html
<div class="home-bottomleft"> <img class="home-bottom-motive" src="/wp-content/themes/jdesign/images/homepage-motive.png" alt="bottom top motive" /></p> <p class="book_antiqua home-bottomtext">xx events full-service event planning company in chicago dedicated creating enjoyable , stress-free planning experience our clients. motivated event trends, inspired traditions, , fascinated of details go personalized , flawless event!</p> </div> <div class="home-bottomright"> <div class="home-brbox"><img class="home-brbox-img" src="/wp-content/uploads/2013/05/xxevents-bottomleftimg.jpg" alt="xxevents" /></p> <p>weddings</p> </div> <div class="home-brbox"><img class="home-brbox-img" src="/wp-content/uploads/2013/05/xxevents-bottommiddleimg.jpg" alt="xxevents" /></p> <p>social events</p> </div> <div class="home-brbox"><img class="home-brbox-img" src="/wp-content/uploads/2013/05/xxevents-bottomrightimg.jpg" alt="xxevents" /></p> <p>showers</p> </div> </div>
so, have left column varied height, , want right column's height determined left (i think - question not entirely clear).
the easiest way have left element in flow, , right element absolutely positioned , stretched container.
you can see effect at: http://jsfiddle.net/ynkxg/1/
a pseduo-html example:
<container> <div, width: 50%;></div> <div, position: absolute; top: 0; right: 0; bottom: 0; width: 50%;></div> </container>
note won't include text resizing show in mockup; have achieved through other means (possibly javascript, unless change in height of left column triggered through media query breakpoints).
Comments
Post a Comment