Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
06-14-2009, 09:33 PM #1
- Join Date
- Jun 2009
- Thanked 0 Times in 0 Posts
Background image(divs) force horizontal scrolling
Here's my problem:
I basically have a container div and 3 divs within that. 1 for the top content graphic(brown) 1 for the middle content, which scales vertically as needed(cyan) and 1 for the footer content graphic(brown).
Because the design has elements that frame the content(EX: drop shadow). I set the width to 1100px and use margins to push the content within the design. This creates a vertical scroll at 1100px or smaller(I need it to only scroll when the browser is smaller than the content width, not the design elements outside it).
The actual content width is represented by the green lines and the design width is represented by the red lines. I need a way for the browser not to worry about the design and only base the site width off the content(green lines) which is, obviously smaller in width than 1024px. This needs to be accomplished with all 3 divs while still maintaining the ability to stretch vertically depending on the content in the middle. Am i going about this the wrong way? I'm open to anything. Please help.
06-14-2009, 10:08 PM #2
Edit: Scratch that, the picture is showing now.
You set the width of your content, header and footer divs to "auto". You then apply
overflow:hidden;to the container div.
How are you applying your dropshadow? Is it one big background image?
Last edited by Kristofa; 06-14-2009 at 10:18 PM.
06-15-2009, 08:22 AM #3
- Join Date
- Mar 2007
- Thanked 2,230 Times in 2,217 Posts