i have this page redesign here. it works ok at 1280x1024px but when i resize the screen to a 1024x768px resolution i get a bunch of problems
the login box at the top right of the screen spills over onto another line
the 2 images in the branding section overlap each other
the 2 blocks in the main content region overlap each other
when i shrink the browser window so that invokes the horizontal scrollbar, and then scroll to the right, i get 3 new problems…
4a. when i move the scrollbar right it no longer fills the entire page
4b. (not in IE cos presumably this doesn’t show multiple bg images) the vertically tiling faded gradient background goes weird
4c. the single pixel border doesn’t extend to the bottom of the page (which it doesn’t need to as long as the footer spans the full distance)
it would be good to get either insights into why any of these problems occur or solutions for solving them
[ i’ve already got a good sticky footer solution thanks to this site & the people on it. its just proving a tad tricky to get the solution working for this less than conventional site ]
The problem is that you’ve designed your content to require too wide a page, it’s as simple as that. If your site requires a viewport of more than 960px wide including the browser itself (personally I would say 800px, but apparently we have to move with the times) then your design is basically broken for a large proportion of people. The solution is to get rid of a load of the fixed widths, and either replace them with smaller sizes or, if possible, max-width.
BTW, what browser are you using? In Opera, I only get 4/4a/4b/4c, but I don’t see 1/2/3 unless I switch off #pagewidth: width:1150px;.
when i shrink the browser window so that invokes the horizontal scrollbar, and then scroll to the right, i get 3 new problems…
4a. when i move the scrollbar right it no longer fills the entire page
4b. (not in IE cos presumably this doesn’t show multiple bg images) the vertically tiling faded gradient background goes weird
4c. the single pixel border doesn’t extend to the bottom of the page (which it doesn’t need to as long as the footer spans the full distance)
That’s because you have elements that are 100% wide and therefore 100% can only ever be the width of the viewport (in normal circumstances) and therefore when you have a horizontal scrollbar the region outside the viewport is greater than 100% and will therefore not be present.
The solution is to supply a min-width to html and body and your footer (and any other 100% wide elements not contained in a fixed width parent) to match the widest elements on the page.
I don’t see problems with 1,2,3 either but changing text size will make the layout break because of the fixed widths.
Designing for a fluid layout or a min max layout needs a different approach and you need to give elements room to breathe and move around which means being a lot more flexible in the design and not fixing heights so that elements can wrap without falling out of the container.
Yes that’s what I meant by "under normal circumstances" and "and any other 100% wide elements not contained in a fixed width parent" which should have made my intentions clear. Perhaps I should have made it clearer
I’ve been struggling with the same problem for hours. Adding the min-width to do body and html resolved the dissappearing content issue. Thanks you for the solution.
