Контейнер div игнорирует высоту плавающих элементов

Хорошо, это кажется действительно глупой проблемой, но я не могу заставить свой контейнер div наследовать высоту плавающих элементов внутри него. Поскольку мне нужно центрировать контейнер div, я не могу использовать float для решения этой проблемы. Вот мой css:

#container {
margin: 0 auto;
width: 1000px;
border-left: 1px solid #f1f1f1;
border-right: 1px solid #f1f1f1;
border-bottom: 1px solid #f1f1f1;
}

#focus {
padding-left: 23px;
width: 977px;
padding-top: 20px;
padding-bottom: 23px;
border-bottom: 1px solid #f1f1f1;
float: left;
}

.rslider {
float: left;
width: 600px;
margin-left: 15px;
}

.welcome {
float: left;
width: 300px;
}

HTML:

<div id="container">
   <div id="logo_block">
   <a href="#"><img src="img/logo.jpg" alt="" /></a>
   </div>
   <div id="focus">
    <div class="welcome">
    <h1>All About This Page</h1>
    <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, liquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
    </div>
   <div class="rslider">
    <img src="img/slider_image.jpg">
   </div>
   </div>
  </div>

Любые идеи?


html css css-float
person Thomas    schedule 14.03.2010    source источник

Ответы (1)


arrow_upward
20
arrow_downward

Вы ищете так называемый clearfix .

person Pekka    schedule 14.03.2010
comment
Я знал о других методах (например, overflow:hidden или float в элементе оболочки), которые нельзя использовать в некоторых ситуациях, но это устранило мою проблему. - person betatester07; 27.02.2015