Container div bỏ qua chiều cao của các phần tử nổi

Question

Ok, do đó, điều này có vẻ giống như một vấn đề thực sự ngớ ngẩn nhưng tôi không thể lấy div container để thừa hưởng chiều cao của các phần tử nổi bên trong nó. Vì tôi cần căn giữa div vùng chứa, tôi không thể sử dụng float để khắc phục sự cố này. Dưới đây là css của tôi:

#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> 

Bất kỳ ý tưởng?

Answer 1

Bạn đang tìm kiếm cái gọi là clearfix.