My question is very basic and generic.
I am starting on designing a page(s) using div tags. now I am confuse with two approaches.
-
should I keep width and height of divs fixed (i.e. fixed with pixels) or
-
should I keep width and height of divs variable (i.e. using % instead of pixels).
I personally like the first approach where you fix everything and there is very little chance of anything getting disturbed at different screen resolution but the drawback is if screen resolution goes below my expected screen resolution then the scroll bars makes the site look bad(there may be more drawbacks but at present I am not remembering it 🙂 ) , so in that case 2nd approach comes into the picture but the thing is once you start using % for your width and height its very difficult to design the page though once its designed its more stable.
I am confused with the two approaches and need inputs on the above two…
thanks in advance.
You answered your own question. The second approach is better in most of the situations, as it would fit all the screen resolutions nicely. Think of when somebody tries loading your page using a mobile phone, then using percentage will help.
And I don’t think using percentage make it harder to design, I even think it’s easier. For example, if you want to adjust the main table width to be 1/4 of the screen, now you only need to set
width: 25%instead of setting (say)width: 250px;and guess if it works on this size of monitor or different sizes of monitor.Imagine that you’re currently working on a 17″ laptop, and the width of your page layout is set fixedly 800px that would fit your screen at the moment. But when you run it on the 24″ monitor, that layout will look like a paper on a desk.
With percentage, say, 70% would fit your 17″ laptop and also, 24″ monitor.
Here is a sample fluid HTML page for you to reference, try to see how it looks with percentages. Note that no matter you minimize the screen, the layout can still adjust. Just simply copy and paste, this is the point of designing.