HTML/CSS problems table display -
i'm not able find way have 1 table 4 rows having same height (without using table tag). table included in div has table-cell display.
i created jsbin: https://jsbin.com/jejupogodi/edit?html,output
i want pink part take available height , each row inside should have 25% of height (whatever content length is).
i tidied code bit. used vh (vertical height) instead of percentage. can run code snippet here fiddle
.container { display: table; width: 100%; height: 100vh; background: lightgreen; } .focus { height: 500px; } .slidercontainer { display: table-cell; width: 40%; height: 100%; vertical-align: top; background-color: white; } .slider { margin: 0px; padding: 0px; list-style-type: none; display: table; height: 100%; width: 100%; } .slider li { display: table-row; cursor: pointer; height: 25vh; background-color: pink; overflow: hidden; } li .sliderimg{min-height:5vh; max-height:5vh;} .sliderdetails { border-bottom: 1px solid black; padding-bottom: 5px; min-height: 20vh; max-height:20vh; overflow-y: scroll; overflow-x: hidden; }<body> <div class="container"> <div class="focus"> <div> <div class="focusdetails"> <div class="focustitle"></div> <div class="focusdesc"></div> </div> <div class="previous" style="display:none;"><span></span> </div> <div class="next"><span></span> </div> </div> </div> <div class="slidercontainer"> <ul class="slider"> <li> <div class="sliderimg"></div> <div class="sliderdetails"> <p class="slidertitle">town hall meeting presentation - sunstar italiana</p> <p class="sliderdesc">on tuesday, june 30 sunstar italiana employees took part town hall meeting presentation made general manager, marco bruscaini. through his</p> </div> </li> <li> <div class="sliderimg"></div> <div class="sliderdetails"> <p class="slidertitle">top management visits hq in etoy</p> <p class="sliderdesc">the welcome sunstar headquarter june meetings' attendees asia, japan, , done tour sunstar campus' 2 buildings, new , previous 1 welcome sunstar headquarter june meetings' attendees asia, japan, , done tour sunstar campus' 2 buildings, new , previous one</p> </div> </li> <li> <div class="sliderimg"></div> <div class="sliderdetails"> <p class="slidertitle">distributor meeting</p> <p class="sliderdesc">for 3rd year have organized our distributor meeting taking place time in our new building in etoy, switzerland.this year, decided extend our invitation the</p> </div> </li> <li> <div class="sliderimg"></div> <div class="sliderdetails"> <p class="slidertitle">distributor meeting</p> <p class="sliderdesc">for 3rd year have organized our distributor meeting taking place time in our new building in etoy, switzerland.this year, decided extend our invitation the</p> </div> </li> </ul> </div> </div> </body>
Comments
Post a Comment