title: html, css img to stop shrinking <div> :)
body: <p>I have one more question(first one is here: <a href="https://stackoverflow.com/questions/5291783/html-css-with-center-div-problem">html, css with center div problem</a>)</p>
  
  <p>So, I have three columns on my web page and when I put image in one of the  and I want to shrink window(browser), image is "going" behind the other div. This is pretty ok, but I would like that this div stop shrinking and to weight of the image become weight of the div, or something like that.</p>
  
  <p>Sorry I don't know to explain it in English, so I will try in images :)</p>
  
  <p>maximized:
  <img src="https://i.stack.imgur.com/uTljd.png" alt="enter image description here"></p>
  
  <p>at this point, it should stop:
  <img src="https://i.stack.imgur.com/ZRhn0.png" alt="enter image description here"></p>
  
  <p>and not to do this:<br>
  <img src="https://i.stack.imgur.com/wfo2Q.png" alt="enter image description here"></p>
  
  <p>html part</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html;charset=UTF-8"&gt;
      &lt;link rel="stylesheet" type="text/css" href="styl.css"&gt;
      &lt;title&gt;Title goes here&lt;/title&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div id="cela"&gt;
        &lt;div id="header"&gt;
        &lt;p&gt;hlavicka&lt;/p&gt;
        &lt;/div&gt;
        &lt;div id="container3"&gt;   
          &lt;div id="container2"&gt; 
            &lt;div id="container1"&gt; 
                      &lt;div id="lavy"&gt;&lt;p&gt;&lt;img src="http://akiscode.com/projects/SOS/chuck_norris_random_fact_generator_6_3957_2224_image_2561.jpg", width="150"/ &gt; Etiam ante est, tempus vitae adipiscing ac, luctus ut massa. Vestibulum malesuada,&lt;/p&gt;&lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
          &lt;div id="stredny"&gt;&lt;p&gt;Mauris orci erat, &lt;/p&gt;&lt;/div&gt;
          &lt;div id="pravy"&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;
             &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
  
        &lt;div id="footer"&gt;
        &lt;p&gt;footer&lt;/p&gt;
        &lt;/div&gt;  
      &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>css part</p>
  
  <pre><code>img
  {
  float: right;
  margin: 0 0 10px 10px;
  border: 1px solid #666;
  padding: 2px; 
  }
  .clear {
  clear:both;
  width:100%;
  } 
  #cela {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  border: 1px #110000 solid;   
  }
  #header
  {
  padding:20px;
  background:#008000;
  }
  #footer
  {
  clear: both;
  padding:20px;
  background:#008000;
  }
  #container3 {
      float:left;
      width:100%;
      background:#CCFFCC;
      overflow:hidden;
      position:relative;
  }
  #container2 {
      float:left;
      width:100%;
      background:#66FF66;
      position:relative;
      right:30%;
  }
  #container1 {
      float:left;
      width:100%;
      background:#00FF00;
      position:relative;
      right:40%;
  }
  #container0 {
      float:left;
      width:100%;
      background:white;
      position:relative;
      right:0%;
      }
  #lavy
  {
      float:left;
      width:28%;
      position:relative;
      left:72%;
      overflow:hidden;
  }
  #stredny
  {
      float:left;
      width:38%;
      position:relative;
      left:74%;
  }
  #pravy
  {
      float:left;
      width:28%;
      position:relative;
      left:76%;
  }
  </code></pre>
  
  <p>i have tried to use overflow: scroll, but the result is not very aesthetic </p>