Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How this layout can work for multiple screen resolutions?

    Hi.
    Basically I want the middle of the design (http://i51.tinypic.com/2iuudzm.jpg) (what's in between the red lines) to be seen by viewers with 1024x768 screen resolution, and have the parts outside of the red lines to still appear in browsers with higher screen resolution. Is it possible to segregate divs to organise this without comproising the design?
    This is the site: http://raws.adc.rmit.edu.au/~s3238684/index.htm
    I tried just center-aligning the main content and make those side panels as the page background (http://raws.adc.rmit.edu.au/~s3238684/default.htm), but then the layout only works on 1024x768 or my screen resolution (1366x768 - and still, that's only if the browser fully maximised)
    Would appreciate if somebody could help out anyway!
    Last edited by dc90; 11-05-2010 at 05:35 AM.

  • #2
    New Coder
    Join Date
    Nov 2010
    Location
    London, UK
    Posts
    40
    Thanks
    1
    Thanked 4 Times in 4 Posts

    Container

    It sounds like you just need a container div.

    Just have a container div, that hold all your content in the middle section.

    Then on this div, set a width of say 1024px.

    Then to centre that div, just add: margin: 0 auto;

    Cheers.

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes I can get the middle section to appear in the middle, but then I can't have the extra sides (the sides that dont appear in 1024x768) stay next to that div and still appear in the middle of the browser.. :S

  • #4
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Your background must be set on an element which stretches 100% of the page. Within that element, you have another container which is set to the width you wish and centered. This partially alleviates the problem. However, there will always be screens with high resolutions. The only way you can solve this is by making the background seamless (i.e. there is a part which can be repeated forever on either side without it looking bad) or by ending the background somehow (like a page metaphor with a drop-shadow or something.)


  •  

    Posting Permissions

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