If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Jul 2010
    Member #
    Hi guys,

    Is there a smarter way of doing this?

    As you can see, the layout is supposing a 1000px wide viewport, or bigger. The foreground image on the left is 650px wide, and the text column on the right is 350px wide. This fills up our 1000px viewport.

    Here is what the layout needs to be able to do :

    1. When there's enough content to fill it, the text column needs to stretch from the top to the bottom of the viewport, and trigger the main browser vertical scrollbar when exceeding this window.
    2. When there isn't enough content to fill the length of the column, the content should be vertically centered.
    3. The image on the left of the column should be vertically centered at all times, or it will lose its sync with the site's background gradient (VERY IMPORTANT).
    4. The image on the left of the column should never scroll with the content. It should be fixated.
    5. The combination of the image and column should be centered in the viewport (both axis).

    The main negative side-effect of the method I used occurs when you reduce the viewport to less that 1000px in width. The image starts moving AWAY from the column (as you can see by trying it out at the link above).

    If there's a better way to get that image and that column into position, I'm willing to try it!


  3. #2
    Junior Member bumper's Avatar
    Join Date
    Jul 2010
    Member #
    I just checked your code...tables, ick. Sorry.

  4. #3
    Senior Member
    Join Date
    Dec 2009
    Chicago, IL
    Member #
    2 times
    There is a better way, but it takes a long time to explain, which is probably why no one is answering you.

    You should really just set your background gradients on the body, then set your left image as a transparent png. You can always use a png fix for IE6 support.

    IE PNG Fix - TwinHelix

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
All times are GMT -6. The time now is 08:39 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: