Reply to comment
Layout of a Fixed Content Column With Javascript-Updated Fluid-Like Margin Widths
- peter's blog
- Add new comment
- 685 reads
In one website I am developing, I want to have a huge background canvas that does not repeat - but I don't want scrollbars and also want all my text content to behave as a normal fixed layout in 960px, without meandering around on a background. The background is going to ultimately blend in visually with additional elements I add later to the foreground, so it has to be fixed. I spent a few days considering whether this could be done with straight html/css, but I wasn't able to come up with a solution. One last thing - I wanted the center 960px background above the fold to load first, to give the viewer something to look at immediately while the rest of the page elements download.
If you're reading this page on palma-seo.com and it is still using the colorpaper drupal theme (which is the light fixed theme with a wood-like surrounding background and a thick blue horizontal background ribbon) you'll see that the theme has several features I am looking for already: no horizontal scrollbar (even when the window is resized), and a centered center main area just under 1000px wide. However, the background (the wood panels and blue ribbon) are a repeating image. I don't want a repeating image. And whereas the colorpaper theme I'm using as of writing for palma-seo.com has a (hardly-visible) seam just to the left and right of the main frame, due to the variable margin widths, I do not want a seam. So I threw in the towel.
Take a quick look at my solution to this javascript width layout puzzle.
It took some experimenting with the div layout and then some experimenting with the correct css style modifications for the variable-width sidebar divs in the demo file - (text-alignment, negative margin, etc.) - and it certainly took some toying around with the javascript - but there we have it - seems to work across browsers. I'm not pleased about the way ie8 has a different width "error" than the other browsers, which would require some ie-specific kentucky windage, and I'll probably do that later assuming I get to the "polishing" stage with the site requiring this theme.
I did grab a few pieces of the javascript from snippets I had laying around that I did not write. I did write the html and part of the javascript. The background image is from a vector banner I bought on istockphoto for then polished for this project.

