Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS container doesn't stretch to accommodate floats

Tags:

<html>  <head>  <style type="text/css">    .container {       width: 900px;       border: 2px solid #333333;       padding-top: 30px;       padding-bottom: 30px;   }    .container_left {       border: 2px solid #FF00FF;       width: 650px;       float: left;   }    .container_right {       border: 2px solid #0000FF;       width: 225px;       float: right;   }  </style> </head>  <body>      <div class="container">         <div class="container_left">         <div>LEFT CONTAINER</div>         <div>LEFT CONTAINER</div>         <div>LEFT CONTAINER</div>         </div>          <div class="container_right">         <div>RIGHT CONTAINER</div>         <div>RIGHT CONTAINER</div>         <div>RIGHT CONTAINER</div>         </div>     </div>  </body> </html> 

The result is:
result

I want a result like this:
desired result

like image 934
Jorge Avatar asked Jan 07 '10 15:01

Jorge


1 Answers

Add overflow: hidden; to the .container selector. This will force the container to acknowledge that it has children.

like image 107
Jan Hančič Avatar answered Sep 24 '22 06:09

Jan Hančič