width:100%; and fix width problem

[dmoukh]

hi. i have a problem in CSS3 en don’t know how to explain, actually my question is, i make a page with width 100% and write a code to have two part in body, the above part is filled by color and the below filled with pattern till now i don’t have any problem but when i put an image which is on a fix width like width: 1000px; and wrap the page which make scroll in my browsers, the color part of body will slice to two part colorful and colorless!!! i don’t know if i explained my problem good.

[paulob]

Hi,

Do you mean that the 100% element shrinks with the viewport but when you scroll to see the content off to the right because of some fixed width content the background colour is no longer around the fixed width element?

If so then find the largest fixed-width item in your page (say 1000px) then set a min-width of 1000px on the 100% wrapper (min-width:1000px). This will ensure the background doesn’t keep shrinking when the viewport is smaller than the fixed width element.

[dmoukh]

thank you so much
the problem is solved

[dmoukh]

hi again, now i have a new problem!
min-width doesn’t work in IE
is there any other way to eliminate my first issue?

[paulob]

HI,

Min-width works in IE from version 7 onwards. I wouldn’t worry about IE6 these days.

Unless of course you aren’t using a current valid doctype (then IE reverts into quirks mode and behaves much like IE5) and of course no one does that these days do they? :)

[dmoukh]

thank you :)

[Author]

Posts