www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 17 of 17

Thread: Display Web Page on Standard and Wide Screens

  1. #16
    Join Date
    Mar 2012
    Posts
    1,276
    Quote Originally Posted by scottjsn View Post
    Just to extend this thread a bit.

    Out of the 1024px width, I try to create a side bar on the right hand side to host the ads, something like:

    <div id="parent" style="width:1024px">

    <div id="left_pane" style="width:70%>
    content here
    </div>

    <div id="side_bar" style="width:30%>
    ads here
    </div>

    </div>

    Not sure, what is the good way to do it?


    Thanks

    Scott
    This is not an effective use of % as the parent div is fixed width anyway. Ideally you want the parent div to be 100% and the right bar (advert) div to be fixed width, whilst the left_pane (content) responds to the display width. So you need to decide what range of overall widths you wish to support (say 480px to 1024px), the width of the fixed bar (say 240px), then do some maths to work out what % of the width is available for the content. I.e.:

    % = (min-width - fixed-bar) x 100 / min-width.

    Which, with the suggested figures is (480 - 240) x 100 / 480 = 50%.

    Using % in this way is the simplest way of making the width responsive, but is not the best. Why? because it does not maximize the screen usage on medium resolution displays. E.g. In the above example:

    - On a screen or window 1024px wide it uses only 1024 x 50% + 240 = 752px, leaving 272px blank (i.e. there would be a blank border of 186px either side).

    - The maximum of 1024px width is reached at (1024 -240) * 2 = 1568px screen or window width.

    This is an acceptable performance, but, given that the most commonly used screen display used to view the web (according to w3counter) is 1366px wide, and less than 10% of web browsing is done on screens of 1600px or wider, this is not optimal.

    To maximize the screen usage on medium resolution displays, you need to use either (or both):
    - Position: absolute, and/or
    - Media specific style sheets or media queries.
    Last edited by jedaisoul; 02-26-2014 at 05:24 AM.

  2. #17
    Join Date
    Sep 2006
    Posts
    192
    I used the external *.css for style.

    The so called "fixed width of 1024px" works like this:

    If the monitor's resolution setting is 1024 or less, then display the full screen, leaving no blank edges on either side, such as

    |<-- Content -->|


    If the monitor's resolution setting is greater then1024, then the page content is displayed on the middle of the screen, leaving 10% blank edges on either side, kind of

    |<--blank 10%-->|<-- Content (80%)-->|<--blank 10%-->|


    Now, with the side bar, I want it to look like:

    |<--blank 10%-->|<-- Content (left pane) -->|<--side bar(fixed width OK)-->|<--blank 10%-->|

    Any suggestion or comments?


    Thanks
    Scott

    P.S.

    The reason I set the 1024 as the break point is that if I set the width to 100%, the content won't look nice on the wider screen, it will be either to left or fully spread across the screen; While leaving 10% on each side as blank makes it look nicer.
    Last edited by scottjsn; 02-26-2014 at 09:59 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles