Fit window to any screen size

[stockton]

Is there any way that one can set up css so that the web page fits any screen size?

Look at www.stockton.co.za/LeaderBoard. Now I would like this to not show scroll bars on my Treo 650 cell phone but to also take up all the screen on a 42" monitor.

My css currently looks like:-

#SlotsWindow {
   position:absolute;                                                             :
   width:47%;
   height:77%;
   top: 120px;
   left: 20px;
   overflow: hidden;
   border: 2px solid red;
}
#TablesWindow {
   position:absolute;
   left: 529;
   width:47%;
   height:77%;
   top: 120px;
   overflow: hidden;
   border: 2px solid red;
}

#SlotsText {
   text-align: center;
   font-weight: bold;
   font-size: 20pt;
   position: relative;
   width: 50%;
   left: 65;
   top: 100;
}
#TablesText {
   font-size: 25pt;
   position: relative;
   right: 420;
   width: 50%;
   left: 65;
   top: 100;
}

Can this be done and if so how do I alter the css?

[ToonMariner]

fluid layots - use %widths... you may want to keep some divs fixed width but its the % ones that will give you teh effect you want.

[stockton]

As I am already using %widths(see my code above) and it does not work the way I want(see my original message/question) I do not see how your reply helps.

Please explain.

[ToonMariner]

AHHHH sorry - 9am Monday morning reading issues!!!

 

You should really consider creating a separate style sheet for each media type.

 

<link rel="stylesheet" type="text/css" href="/global/style/screen.css" media="screen" />

<link rel="stylesheet" type="text/css" href="/global/style/print.css" media="print" />

<link rel="stylesheet" type="text/css" href="/global/style/handheld.css" media="handheld" />

 

those style sheets above dictate the stites layout on a PC, printed document and a handheld device (pda, mobile phone) in that order.

 

It is simply the case that different device types do different things - so unless you provide a different 'contoller' for each media you will get unexpected results...

[stockton]

Thank you. So from what you say there really is nothing wrong with the css I presented above?

[ToonMariner]

don't use fixed fon't sizes in your css, when ever you have position: relative - specify units in the positioning properties (top: Xpx; left: Xem; - etc)