css for any monitor size

[laura301019]

I am creating a web site and have written css postions etc using % so that it will look the same on any monitor size. So when I view the website on my own laptop which resolution is 1366 x 768 it looks perfect however when I view it on a widescreen monitor there's various parts that are out of place and further down the screen. One of the sections on the home screen which is out of place is the login form, the css for it is:

.clientForm
{

   position:absolute;
   top:35%;
    left:40%;
    color:Silver;
    font-size:medium;
    height: 112px;
    width: 311px;
}

Just wondering if anyone knows why it would look so different on a widescreen monitor when % are being used and if there's any way to fix it?

Thanks in advance.

[wazz]

a lot of css relates to the 'container' the element is in. that's one thing to remember.

percentages would explain the different appearance when the screen is wider or narrower. if the screen is 100px wide, and something is 40% from the left, it's 40px from the left. if the screen is 1000px wide, the element is now 400px from the left.

simple paddings and/or margins might be helpful.

if you need a flexible design, seriously consider a framework such as twitter's Bootstrap.

[cilla]

...or a simple grid system if you don't need all the bells and whistles that comes with full-featured CSS/design frameworks like Bootstrap. (You can also/alternatively get a custom build of Bootstrap with only its grid system.) 960.gs, for example, is solely a grid system. Implementing it in your layouts will help ensure proper positioning across screen sizes, with just a little TLC.

Your weirdness may result from vertical differences, so for this use 'rem' measurements intead of 'em'. This has the advantage of comparing to the root size without all the cascading comparisions with parent containers. So in short % horizontal and 'rem' for vertical. I'm still getting to grips with it myself, so still a bit fuzzy. Also be aware older browser may not support it, in which case you need to provide a fallback.

[AceStar]

Did you put position: relative on your parent element? If not, that may cause problems.

[veera100]

use media query for resizing you screen resolution.

And width size can mension with 100%;