title: CSS - Make outer <div> background to expand to inner <div> width
body: <p>Look at this simple page:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
     &lt;style type="text/css"&gt;
        body {padding:20px;}
        #outer {background-color:#ff0000;}
        #inner {width:500px; border:1px solid #0000ff;}   
     &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
     &lt;div id="outer"&gt;
        &lt;div id="inner"&gt;
           &lt;p&gt;Why the hell outer div bg color does not expand?&lt;/p&gt;
           &lt;p&gt;Why the hell outer div bg color does not expand?&lt;/p&gt;
           &lt;p&gt;Why the hell outer div bg color does not expand?&lt;/p&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>When browser page is shrinked below the width of <code>&lt;div id="inner"&gt;</code></strong> (i.e. <code>500px</code> in this example) and <strong>then you scroll browser page to the right</strong>, you will see that the right side of the inner div does not have the red background anymore:</p>
  
  <p><img src="https://i.stack.imgur.com/Yierw.jpg" alt="enter image description here"></p>
  
  <p><strong>Do you know how to fix the background of the <code>outer &lt;div&gt;</code> in order to make it never shrinks below the <code>inner &lt;div&gt;</code> width???</strong> (I still need the <code>outer div</code> background to expand to full browser width so it can not be set to <code>width:500px;</code> too).</p>
  
  <p><strong>EDIT:</strong> in other words I would like to see the red background color of the outer div to fill the total 500px width of the inner div and not to shrink to browser size leaving the right side of the inner div with no red background. In order to do this I can not simply set the outer div to be 500px too because when browser is expanded I need the red background color to expand too.</p>