web-dev-qa-db-ja.com

コンテナー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>

何か案は？

csshtmlcss-float
21
Thomas

いわゆる clearfix を探しています。

19
Pekka