Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    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.

  2. #2
    Regular Coder Kristofa's Avatar
    Join Date
    Jun 2009
    Thanked 20 Times in 20 Posts
    Edit: Scratch that, the picture is showing now.

    How about...

    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 11:18 PM.

  3. #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Thanked 2,250 Times in 2,237 Posts
    Please post a link to your page...


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts