title: putting floating elements into div
body: <p>I've written code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;META http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; 
  
  &lt;style type="text/css"&gt;
  * {padding: 0px;margin: 0px;}
  body {width:100%}
  img.logo{display:block;width:80%;margin-left:10%;margin-right:10%;}
  div.down{width:80%;margin-left:10%;margin-right:10%;height:auto;border:red solid 1px;overflow: auto}
  .bar{width:10%; height:100%; float:left; display:block;}
  .cent{width:80%; float:left;}
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;img class="logo" src="logo.gif"/&gt;
  &lt;div class="down"&gt;
  &lt;img class="bar" src="bar.jpg"/&gt;
  &lt;div class="cent"&gt;
  //LOT OF TEXT//
  
  
  &lt;/div&gt;
  &lt;img class="bar" src="bar.jpg"/&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>And When I write lot of text into "cent" div the "down" div gets streched. However, "bar" images dont get resized despite height set (100% or inherit) which should inherit height from parent. What should I do to make it work ?</p>