Just a quick question about layout out div's in CSS, do you use px or %??

DJMK4

DJMK4

DJMK4

Soldato
Joined
1 Dec 2004
Posts
23,079
Location
S.Wales
Just created a new layout in photoshop, sliced up the sections but was wondering what the best way to size your CSS Divs, is it best practise to use "px" or "%" to set the sizes of your divs these days?

Help greatly appriciated.

Thanks :)
 
Percent allows the content to size with your browser, but I've found causes a number of issues in older browsers whereas a pixel size specifically sets how wide something is and is usually far easier to work with.
 
That would all depend on your layout. The majority of layouts these days are fixed which means they use set widths such as 960px. The biggest reason for this is the greater amount of control it gives you. You're able to line things up with px perfect precision. IMO, full fluid width works best with forums and shops and that's about it. For everything else, fixed or elastic is the way to go.
 
Personally, I've tried to avoid using %-based ratios for layout, as it can easily introduce rounding differences cross-browser; some browsers round up, while others round down. If you're using borders on your layout boxes, this can be particularly noticeable/troublesome.
 
simisker said:
Instead, I prefer to use ems. Yes, they require you to get your calculator out, but browsers tend to render these relativistic units more consistently.
Click to expand...

I'm confused why you would do that? Most modern browsers are set by default to zoom the whole page, not just text these days.

So one layout done easily in px and the same layout done in em, they should look and act identical in IE7,8,FF, Opera, Safari and Chrome. Only IE6 would play differently.
 
Tripnologist said:
I'm confused why you would do that? Most modern browsers are set by default to zoom the whole page, not just text these days.

So one layout done easily in px and the same layout done in em, they should look and act identical in IE7,8,FF, Opera, Safari and Chrome. Only IE6 would play differently.
Click to expand...
You took your time replying to this :p :D

As you can see, I gave it a bit more thought and realised I was addressing a different issue with the ems, so wiped it from existence. Or so I thought :D

EDIT: Of course, there are users that prefer to increase just the text size - and both IE and FF give the user the choice. Hence my preference for using ems; this maintains layout integrity [or at least is more flexible] for these users.
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom