html5 - Parent container not expanding to child elements -
i have bunch of vertically aligned tab items in , can't seem parent container (the <a href...>
in html) expand cover child elements. i've tried using <br style="clear: both">
, overflow: hidden;
but first didn't , second cut off (using auto added scroll bar, doesn't help) thoughts on how fix it?
html sample:
<li class="active"> <a href="#pane1a" data-toggle="tab"> <div class="preview-box"> <img class="preview-image" src="img/monestary_floorplan.png"> <p id="previewcarousel1a"></p> </div> </a> </li> <li> <a href="#pane1b" data-toggle="tab"> <div class="preview-box"> <img class="preview-image" src="img/bkg-img-home2.jpg"> <p id="previewcarousel1b"></p> </div> </a> </li>
css:
.preview-box { width: 90px; height: 80px; /*border: 2px solid red;*/ margin-left:auto; margin-right:auto; } .preview-image { display: block; width: 75px; height: 60px; border: 4px solid #84be46; margin-left:auto; margin-right:auto; } .preview-items p{ color: #84be46; text-align: center; margin-top: 5px; }
the whole site can seen here
adding display: inline-block;
a
element seems solve problem. may have adjust padding/margin, though.
Comments
Post a Comment