100% width DIV

This is not my layout, or my coding, I'm just using this as an example:

http://cmstemplates.net/sales/blog6/

If you go onto that blog design, then change your browser size to say 800x600, or simpily Restore Down your window so you have to horizontally scroll.

When you do so, the background on the 100% width div's gets cut off, and bugs up the layout.

Anyone know how to fix this?
Cheers

I guess no-body knows?

Not sure what you mean, but the content section of the design doesn't seem to be flexible at all.

It would seem that since the h1 set to a fixed width, and the .leaderboard div set to a fixed width (both adding up to be over 800px), they do not contract like the rest.

That may be the problem.

EDIT: Heh, but also looking at it, having the featured image as one big image won't allow the rest to expand either. (http://cmstemplates.net/sales/blog6/..._container.gif). Thats over 1000px itself. So nothing below 1000px will work.

Hmm, not sure you understand what I mean

again that design is not mine, or my code.. it was just an example but:

http://img337.imageshack.us/img337/7292/22487200ua7.gif

See how the header and footer are cut down when the window is minized, or you have to scroll

Right, because the content area may be able to expand; it is going out as far as the container div I am guessing. However, the container div can't go very far in because the 2 divs in that design (I know isn't yours (h1 and .leaderboard - among other fixed widths in the code)) can't collapse in.

For things to be fluid or flexible, you need to use percent measurements all the way through.

Maybe thats still not your problem... But I think that is what is causing it to break up. (and would cause any other design to break up as well)

It's quite simple really, to see what has gone wrong. the div .top has a fixed width of 990px, so if the viewport is reduced, it sticks out the side.

It is also due to a common disease known as "being daft enough to design the layout with the design window set a full screen and then not checking the design in when it is resized", IE careless designer syndrome.

Possible solution? set a min-width on .container, and set .top to 100%

Yeah min-width will help some browsers, but not all support it.

Originally Posted by Dr John It's quite simple really, to see what has gone wrong. the div .top has a fixed width of 990px, so if the viewport is reduced, it sticks out the side. It is also due to a common disease known as "being daft enough to design the layout with the design window set a full screen and then not checking the design in when it is resized", IE careless designer syndrome. Possible solution? set a min-width on .container, and set .top to 100%

Originally Posted by Gurnk Yeah min-width will help some browsers, but not all support it.

I know that.
And I also know how to make those that don't recognise it work just as well.

But I also don't have to do all of someone else's work for them, do I?

(Hint: conditional expressions.)