Контейнер не расширяется содержимым

#html #css

#HTML #css

Вопрос:

У меня небольшая проблема с одним из моих контейнеров. Он не расширяется с моим контентом. Вот код:

 <!--center section start-->
<div id="centerContent">
    <!--center left begin-->
    <div id="centerLeft">
    <h2>
    Special Disney Ticket Offer!
    </h2>
    <p class="specCont">
    <img class="specImg" src="images/universal-main-offer.jpg" alt="Special Universal Studios Ticket Offer!" />
    Super Value Disney 3 Day Touch of Magic Ticket! Just $219 for each ticket! Get 3 Days to visit the Disney Theme Parks (Magic Kingdom,        Epcot, Hollywood Studios, Animal Kingdom) PLUS a 4th day at Disney Quest, Blizzard Beach or Typhoon Lagoon! For an unbelievable value!        Call amp;amp; ask for the Resort offer<br />(restrictions apply).<br /> <strong>Call us: 1-800-544-7646</strong>
    </p>
    </div>
    <!--center left end-->
    <!--center right begin-->
    <div id="centerRight">
    <a href="http://tix.greatorlandodiscounts.com/index.php?catid=106">
    <img class="rightFrontImg" src="images/legoland-fl-front-ad.jpg" alt="Legoland Florida Discount Tickets" />
    </a>
    </div>
    <div class="clear"></div>
    <!--center right end-->
</div>
<!--center section end-->
  

CSS:

 #centerContent {
    width: 980px;
    height: 100%;
    background-image:url(../images/main-special-bg-strip.png);
    background-repeat:repeat-y;
}

#centerLeft {
    width: 572px;
    height: 100%;
    float:left;
}

#centerRight {
    width: 408px;
    height: 100%;
    float:right;
}
  

Что я хочу сделать, так это растянуть раздел centerContent div с двумя разделениями внутри. У меня есть фоновая полоса в centerContent, которая позволит белому фону расширяться на 100%.

Я надеюсь, что это имело какой-то смысл, и заранее благодарю вас за любую помощь.

Ответ №1:

Добавить overflow:auto; в #centerContent .

Поскольку дочерние элементы управления перемещаются, родительский элемент сворачивается и действует так, как будто у него нет содержимого. Добавление overflow:auto; восстанавливает ожидаемое поведение.

Комментарии:

1. Спасибо за ваш быстрый ответ. Я только что попробовал это, и у меня появились полосы прокрутки внизу и справа.

2. Основываясь на предоставленном вами коде, этого не происходит: jsfiddle.net/j08691/KW6M9 . Вы также могли бы попробовать overflow:hidden вместо этого.

3. Еще раз спасибо. Я попробовал это, и я получаю тот же эффект, что и раньше. Есть ли какой-либо способ, которым я могу опубликовать весь код страницы?