Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
I am new to web development. I have 1280*800 resolution in my system. When i design CSS elements,i have to give positons interms of pixels. If i design for my resolution, the same page may look big in small moniors.
How can i design resolution independent CSS elements
The first thing to do it pick a minimum resolution for the site to support without horizontal scrolling. Refer to W3 Schools as a guide; they’re currently reporting at least 93% of browsers at 1024×768 or greater so that’s a good place to start.
The next thing is decide on fixed versus variable width. For example, should all machines render the site at the same fixed width compatible with the minimum resolution you defined above or should the elements flow across the entire space available horizontally. The fixed width option is more predictable but variable width makes better use of screen real estate.
Finally, try to avoid explicit width or left / right positioning of you go down the variable width path. This is fine for some page elements such as a navigation column which always renders at the same width but other elements such as the main page content need to expand beyond any explicit boundaries. The best option is to define the width of a parent container (it may just be 100% which is the default for a div element anyway), then allow the child elements to fill out the container and let the browser render the width accordingly.