Correct Page Width

vipercode · 02-16-2013, 03:56 AM

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;
}

felgall · 02-16-2013, 07:02 AM

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.

webdevs · 02-16-2013, 09:57 AM

960px width will be set with 1024 screen size resolution of your website.

tempz · 02-16-2013, 04:10 PM

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>

jamesicus · 02-16-2013, 04:50 PM

Another approach:

Flexible "Float Box Left" Layout

James

felgall · 02-16-2013, 10:46 PM

Quote:

Originally Posted by tempz

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.