html - 3 columns same height -
i'm trying set same hight 3 columns. i've been looking around internet , tried several options, of them seems working.
here code:
html
<div class="container"> <div id="firstblockgroup" class="col-md-24"> <div class="columnlayout col-md-8 col-sm-8 col-xs-24"> <img class="imageofcolumn" src="images/leftimg.png" alt=""/> <div class="descriptionpic"> <span class="titlelabelpic">bordeaux 2014</span> <span class="desclabelpic">read our honest review of interesting recent vintage</span> <span class="morelabelpic">if it's lemon, call lemon >>></span> </div> </div> <div class="columnlayout col-md-8 col-sm-8 col-xs-24"> <img class="imageofcolumn" src="images/middleimg.png" alt=""/> <div class="descriptionpic"> <span class="desclabelpic">decorum vintners' producer of month</span> <span class="desclabelpic">june 2015</span> <span class="morelabelpic">domaine etienne sauzet >>></span> </div> </div> <div class="columnlayout col-md-8 col-sm-8 col-xs-24"> <img class="imageofcolumn" src="images/rightimg.png" alt=""/> <div class="descriptionpic"> <span class="desclabelpic">discover incredible wines queen victoria's favourite region in germany</span> <span class="morelabelpic">mosel superstars >>></span> </div> </div> </div> </div>
css
.columnlayout { padding: 0px; margin-right: 20px; width: 32.4%; height:100%; } .columnlayout img{ width:100%; } .columnscontainer{ padding-bottom:50px; } #firstblockgroup{ margin-bottom:50px; overflow:hidden; padding:0; display:inline; } div.columnlayout:last-child{ margin-right: 0 !important; } .descriptionpic{ background-color:#fff; padding:10px; } .descriptionpic span{ display:block; } .titlelabelpic{ text-transform: capitalize; } .desclabelpic{ color:#78777d; } .morelabelpic{ color:#58575f; font-weight:400; } .imageofcolumn{ width:100%; height:220px; }
i've been trying put on jsfiddle appear displayed in block, no column next each other....
can give me hand? don't know i'm doing wrong...
cheers!!!
in .columnlayout
class add min height property e.g.min-height:200px;
container should have minimum height , if content within these blocks more adapt new height.
Comments
Post a Comment