I am getting into the css and dont really have much expirence of web building.

I ve made a css based template for practice but I have problems testing a

site on different screens.

How can I determine the width of the display and set it for the website, so each time the site is open the colums dont look messed up.

Or maybe there is a problem with my css ?

body{
padding : 0;
margin : 0;
font : 0.74em Arial, sans-serif;
line-height : 1.5em;
color : #fff;
background : #2e67f5; 
}
h2{
font : bold 1.8em Arial, Sans-Serif;
padding : 10px 0 4px 0;
margin : 0;
letter-spacing : -1px;
}


.content {
margin : 0 auto;

}
#main{
width:1000px;
margin : 0;
padding : 0;
}

#top{
padding-top : 0;
background :  url(Images/bluetop.gif) repeat-x;
height : 260px;
margin-bottom : 0px;

}
#menu{
font: bold 1.0em Arial, sans-serif;
}
#menu ul{
margin: 0;
padding: 0;
float: right;
margin-top : 190px;
margin-right : 5.0em;
border: 1px solid #fff; /*dark purple border*/
border-width: 1px 0;
background: black url(Images/button.gif) center center repeat-x;
}
#menu ul li{
display: inline;
}
#menu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid #fff; /*white divider between menu items*/
}
#menu ul li a:visited{
color: white;
}
#menu ul li a:hover{
color: white; /*text color of selected and active item*/
padding-top: 6px; /*shift text down 1px for selected and active item*/
padding-bottom: 4px; /*shift text down 1px for selected and active item*/
background: white url(Images/indentbutton.gif) center center repeat-x;
}
.home{
border-left : 1px solid #fff; /*put the border at the start*/
}
#searchform {
clear:both;
padding-top: 0px;
padding-right : 5.0em;
text-align : right;
}
#searchform input {
margin-bottom : 5px;
}
#searchform #s {
width : 150px;
}
input,textarea {
    background: #2e67f5;
    border: 1px solid #FFFFFF;
    font: bold 13px Arial, Helvetica, sans-serif;
    color: #fff;
}
.leftcontent{
width : 500px;
margin-left : 100px;
margin-bottom : 2.0em;
float : left;
}
.leftcontent h1 {
font :  1.8em Arial, Sans-Serif;
height : 40px;
margin : 0;
padding-top : 5px;
padding-left : 10px;
letter-spacing : -1px;
width : 500px;
background : url(Images/head.gif) no-repeat top;
}
.right_side {
float : right;
width : 300px;
margin-right : 100px;
margin-left : 0px;
overflow : hidden;
}
.right_side .pad {
padding : 60px 0 10px 17px;
}
.right_side p {
padding : 0 0 5px 5px;
}
.right_side a {
text-decoration : none;
}
.right_side a:hover {
text-decoration : underline;
}
.right_side h3 {
color : #fff;
font : bold 1.2em Arial, Sans-Serif;
background : url(Images/commentbar.gif) no-repeat top;
width : 300px;
height : 30px;
padding-top : 7px;
text-indent : 10px;
}
#footer {
clear : both;
height : 40px;

margin : 4em 0 0 0;
padding-top : 10px;
padding-left : 400px;
color : #fff;
border-top : 1px solid #fff;
background : url(Images/button.gif) repeat-x;
}

Thanks

How can I determine the width of the display and set it for the website

You don't!

either use a fixed width layout (768px - 782px for 800x600, 976px - 996px for 1024x768) or make the layout fluid so it adjusts to different resolutions.

Well I guess most modern users will use a 1028x780 but if I want to make it

fluid I dont set width in the colums or the body and just use floats is that right ?

Do not set an explicit width in pixels.
Instead, use percentages (ems cause some difficulties in browser incompatibilities). All margins and padding should also be set in percentages.

Don't forget math. Adding all margins, padding, and window widths should not exceed 100%, otherwise your floats will break. I usually float one column left and the other right, to account for browser differences. I ignore the use of margins and allow a gap between the two floats. I don't recommend more than three columns!

floats are something totally different, although a fluid layout often needs some floated elements.

For a fluid layouts, widths should be specified in scaleable units %, ems or exs so that they adjust accordingly to the client browser width, which is not always the same as the screen resolution.

I ve done some reading and set the width to 100%, its a two column layout and both are floating to the left and its seems to work ok, so I will go and check the site on different resolutions. Do you recommend to use % for margin, padding etc. all the time ?

I would give the url but its offline now so I ll have to find a free host or something.

Thanks for your help.