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