Родительский контейнер, не расширяющийся до дочерних элементов

Question

У меня есть куча элементов с вертикально выровненными вкладками, в которых я не могу получить родительский контейнер (<a href...> в своем HTML) для расширения, чтобы покрыть дочерние элементы. Я пробовал использовать <br style="clear: both"> и overflow: hidden;, но первый ничего не делал, а второй просто отключил его (используя auto просто добавил полосу прокрутки, что не помогает) какие-либо мысли о том, как ее исправить?

HTML пример:

<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; 
} 

Весь сайт можно увидеть here

Answer 1

Добавление display: inline-block; к вашему a элемент кажется, чтобы решить вашу проблему. Тем не менее, вы можете настроить отступ/маржу.