Search code examples
htmlcssresizebackground-color

Fixed width div losing its background-color upon resizing the browser window

I am creating a blog based on the 960 grid system. It has three simple divs:

  1. header 2. Content 3. Footer and each of them has a fixed width div which holds 2-3 columns of text. The content div, and the fixed width div inside it have the same background color, but when i reduce the size of the browser window, for some reason it ignores the content div's color and reveals the color of the html body.

here's an example of another website where it happens: http://encourageothers.com/ ... reduce the size of the browser to something less than 900 px or so, and scroll horizontally to the right ... u will see what I mean.

Please help me! ... This is driving me nuts!!

Solution

  • jake is absolutely right with the 100% width related to the viewport of the browser.

    instead of adding an additional max-width, add an additional MIN-width to the div showing the resize-problem. if your smallest width, before the scrollbar appears, is 1200px - just give the div in question a min-width of 1200px.