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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jan 2013
    Location
    Australia
    Posts
    118
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Correct Page Width

    I would like to know what to set my default css page with at. For more modern computers.

    I have been researching it in a few places but most common is 960px. But not sure if should set it as 1024 px.

    I am just trying to choose the correct one because for my website the <section> part has three columns with borders and middle column margin right -left 5px; can't seem to get correct inline the right one always goes under

    example {width 960px margin auto} {width 1024px margin auto}

    <div id="main_box">
    <section class="col">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    </section>
    </div>

    .col {
    float: left;
    margin: 0px 5px 0px 5px;
    clear: both;
    }

    .box1 , .box2, .box3 {
    width: ?????? Not sure correct width is width is 960 or 1024 just only thing I am stuck on
    padding: 2px 2px 2px 2px;
    border: 1px solid black;
    }

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    The minimum you need to cater for is 200px. The maximum is 9999999999999999999999999999999999px.

    The best way to cater for as many widths as possible is to set the width as a % - either 100% or slightly less if you want borders down the sides. Next set a max-width so that things don't get ridiculously wide (unless you are displaying a stock market ticker and want to cater for people who have 50 monitors side by site so they can see a lot all at once. Each column of content should be no more than 30 to 35em wide or people can lose track of where the next line starts when they get to the end of a line. Only the min-width should be set in pixels and only if your content requires it.

    Note that Windows 7 makes it easy to display two windows side by side using windowkey-leftarrow and windowkey-rightarrow. On a typical 1920 x 1080 screen that gives each window 960px which once you deduct for the browser borders gives you a maximum viewport width of about 945px. Also when printing the page needs to fit into about 740px.

    Most browsers will allow their size to be reduced to 200px wide and some mobile devices do not have much more width available than that. You might use media queries to present a different layout with fewer columns when the width goes under 600px or so.

    If you have two visitors to your site then it is almost certain that their browsers will be set to different widths. Fixed width layouts became impractical once mobile devices were introduced and screen sizes went above 800x600.

    With the specific line you are asking about in the code you provided I would go with 94% to leave room for the padding and margins.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    riwakawd (02-18-2013)

  • #3
    New Coder
    Join Date
    Nov 2012
    Location
    India
    Posts
    53
    Thanks
    0
    Thanked 3 Times in 3 Posts
    960px width will be set with 1024 screen size resolution of your website.

  • Users who have thanked webdevs for this post:

    riwakawd (02-18-2013)

  • #4
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Code:
    <!doctype html>
    <html>
    <head>
        <title></title>
        <style type="text/css">
            .wrapper { width: 960px; margin: 0 auto; background-color: #cccccc; }
            body { margin: 0; padding: 0 }
        </style>
    </head>
    <body>
        <div class="wrapper">
            your content...
        </div>
    </body>
    </html>

  • Users who have thanked tempz for this post:

    riwakawd (02-18-2013)

  • #5
    Regular Coder jamesicus's Avatar
    Join Date
    Oct 2008
    Posts
    106
    Thanks
    0
    Thanked 11 Times in 10 Posts
    Another approach:

    Flexible "Float Box Left" Layout

    James
    Last edited by jamesicus; 02-16-2013 at 04:51 PM. Reason: added symbol
    Web Developer Tool Kit - for creating Standards compliant and Interoperable web pages
    W3C Markup Validation Service - validate HTML code for reliable rendering in all Browsers
    WAVE accessibility evaluation tool - check page structure, image alt text, form labels, etc.

  • Users who have thanked jamesicus for this post:

    riwakawd (02-18-2013)

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by tempz View Post
    Code:
            .wrapper { width: 960px; margin: 0 auto; background-color: #cccccc; }
    All the pages stupid enough to be set to a fixed width that wide display a horizontal scrollbar in my browser that is only allowed to use 50% of my 1920px wide screen.

    Also such a page would have about 1/4 chopped off if you tried to print it.

    If you are going to use a fixed width then it must be 740px or less.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    riwakawd (02-18-2013)


  •  

    Tags for this Thread

    Posting Permissions

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