0

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.

Marco Demaio
  • 33,578
  • 33
  • 128
  • 159

3 Answers3

2

Add this to your css

#outer {background-color:#ff0000; min-width: 500px;}
chadpeppers
  • 2,057
  • 1
  • 20
  • 27
1

That's because your inner div is overflowing from the outer div, and not making it expand. Adding overflow: hidden to your outer div, will prevent this from happening by hidding the part of the inner div that overflows.

You can see a demo of that behavior here: http://jsfiddle.net/p6BQg/

More about the CSS overflow property here: http://www.w3schools.com/cssref/pr_pos_overflow.asp

EDIT: To keep the background color on the inner div please see this example: http://jsfiddle.net/p6BQg/1/

Telmo Marques
  • 5,066
  • 1
  • 24
  • 34
  • The `overflow:hidden` sinply makes the outer div to shrink even more, and the bottom scrollbar disappears. I need the outer div background to fill the inner div to its 500px. I don't want the bottom scrollbar to disappear. – Marco Demaio Apr 04 '12 at 16:14
  • @MarcoDemaio, your inner `div` is overflowing the outer `div` size. You can't fill the inner `div` with the outer `div` background if your inner div is overflowing it. Maybe you want something more like this http://jsfiddle.net/p6BQg/1/ ? – Telmo Marques Apr 04 '12 at 16:27
  • @Temo Marques: be aware that your example works in jsfiddle, but it does NOT work in real browser!!! If you copy and paste your code in a browser page and do the test you will see it does NOT show like jsfiddle. Tested I7/IE8 and Safari5. You simply added `width:100%` which is not needed because `outer div` is already `width:100%`, on jsfiddle it works probably because it displays stuff in `iframe`. Actually it makes sens because it's called jsfiddle and NOT cssfiddle. The right answer is `min-width`. – Marco Demaio Apr 04 '12 at 16:36
  • @MarcoDemaio, tested in Chrome 18 outside of jsFiddle and working. The code being defined in a fiddle should't be the reason for the different behavior you're observing, `iframe` or not, the HTML/CSS/JS is rendered the same way by the browser. But I do agree with you, `min-width` provides a better solution. I was unaware of such property, just learned something myself ;) – Telmo Marques Apr 05 '12 at 11:34
-1

body { padding: 20px }

is causing the issue you see. removing that will prevent the "shrinking" as you call it.

for example: http://jsfiddle.net/MvJTa/

Marty Cortez
  • 2,325
  • 1
  • 17
  • 22