Search code examples
cssbackgroundexpand

CSS - Make outer <div> background to expand to inner <div> width

Look at this simple page:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <style type="text/css">
      body {padding:20px;}
      #outer {background-color:#ff0000;}
      #inner {width:500px; border:1px solid #0000ff;}   
   </style>
</head>
<body>
   <div id="outer">
      <div id="inner">
         <p>Why the hell outer div bg color does not expand?</p>
         <p>Why the hell outer div bg color does not expand?</p>
         <p>Why the hell outer div bg color does not expand?</p>
      </div>
   </div>
</body>
</html>

When browser page is shrinked below the width of <div id="inner"> (i.e. 500px in this example) and then you scroll browser page to the right, you will see that the right side of the inner div does not have the red background anymore:

enter image description here

Do you know how to fix the background of the outer <div> in order to make it never shrinks below the inner <div> width??? (I still need the outer div background to expand to full browser width so it can not be set to width:500px; too).

EDIT: 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.

Solution

  • Add this to your css

    #outer {background-color:#ff0000; min-width: 500px;}