Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

Coding a new website. Basically, for position elements using CSS I would use percents and figured that was the best thing to do since everyone's monitor was a different size. But I noticed a lot of big websites use pixels.

I don't understand how you can use pixels to position things since we all have a different size screen?

share|improve this question
    
It's elastic layout vs fixed layout, and not all pages benefit from the former. See this –  treecoder Feb 17 '12 at 4:25
    
You forgot em. Favour em over px –  Raynos Feb 17 '12 at 14:55

2 Answers 2

The fluid layout provides, in general, better user experience, but is not without flaws. When using fluid layouts, you are testing them on medium-small to medium-large screens, but you certainly can't do complicated fluid layouts with CSS2 (no JavaScript, no HTML5/CSS3) which works perfectly well on any device, from a small mobile phone to a 30-inches full-screen mode.

The fluid layout is also more expensive in most cases. This is true for the visual design, the ergonomics and the HTML/CSS development.

The fixed layout gives the ability for a developer to say:

  1. I gathered the statistics about the browsers of my visitors, and know that 95% of users of my website have a resolution width between 1024 and 1920 pixels. Instead of spending a month designing a fluid layout, I will target the resolution of my 95% of users, and spend the free time to implement some cool features instead.

  2. If I have enough time and resources, I'll do a dedicated version for mobile phones.

The fact that fixed layouts are easier to implement is important here. I have a choice: either I do a fluid layout which will in all cases look bad on very small or very large screens, or I spend the same amount of time and money creating two or three layouts for different resolutions.

Aside the cost, fluid layouts have also some issues you can't solve without HTML5/CSS3 or JavaScript.

  • Example 1: Programmers.SE has a fixed layout. This means that on any resolution, the main text I read (the questions and the answers) will be no longer than, say, 800 pixels in width. Given the current font size and the line spacing, this is ok to be able to read fast.

    If Programmers.SE moves to fluid layout, your current question would we 1 600 pixels width on my screen at this moment. This will be totally unusable, and I wouldn't be able to read a long text without requiring to minimize the browser window and adjust it for the website.

  • Example 2: in a recent project, I split the text in two columns for the browsers which support this. Given the font size and the line spacing, one column is not really readable, but two are perfect. Since I know the width of the page, I know how the text will appear in 93 to 94% cases: the other 5% are using browsers that don't support text columns, and the final 1 to 2% are using custom font sizes (i.e. people who don't see well and enlarge the fonts by default and/or people who don't have the font I use on the page).

    With a fluid layout, I wouldn't be able to do that without HTML5: on a 30-inches monitor full-screen, two columns would still be unreadable: it would require four or five columns instead. On a screen of a large mobile phone, two columns would be unreadable neither, since there will be one to three words per line.

  • Example 3: you have a topmost menu with the parts of your website. There are five parts, and the elements are float:lefted. With a fixed layout, it magically works, and fails if the user specifies the larger font for accessibility reason. With a fluid layout, what will happen with those elements if the user resizes the page to a width smaller than the total width of those five elements?

share|improve this answer
    
Okay so if I do position:fixed; then it should be the same on any computer? But I don't understand how if I say to position a div element 200 px from the top, even if it's position fixed, how will it not look different on a smaller screen, such as on my laptop? –  Norm Feb 17 '12 at 4:44
    
Sorry, I don't understand your comment, and maybe I misunderstood your original question when editing it. If yes, please revert my changes and try to explain your question in a more explicit way, give some examples, etc. As I understood it, it has nothing to do with position:fixed (which is used to keep an element fixed when scrolling), but rather with specifying width:60% vs. width:850px. –  MainMa Feb 17 '12 at 4:52
    
Oh okay. Well I want to position my navigation bar using a div element, but when I say to position it like top:100px; left:200px; it will look different on my 1990x1020 monitor and my small 15 inch laptop screen. For example, the positioning from top:100px will look fine on my 1990x1020 monitor, but on my small laptop the element will be pushed too far down and be in the middle of the page. –  Norm Feb 17 '12 at 4:58
    
Pushed too far down? Well, it's expected to remain at x:100, y:200. If it's not what you see, you may review your markup or post a separate question on Stack Overflow. –  MainMa Feb 17 '12 at 5:07
    
Yes because on a smaller resolution screen, the pixel size is smaller. So it will look different, and in some cases elements may collide. –  Norm Feb 17 '12 at 5:09

There are a couple situations when I will use pixel based positioning.

The first being when I am creating absolute positioned menus or items.

The other situation I can think of is when I create webapps. I want the environment to give a desktop like appearance utilising all of the space. The layout is dynamic in sizing(some times I use YUI2's layout which is really helpful. See here: http://developer.yahoo.com/yui/layout/). So on window resizes the layout also resizes.

Pixel based positioning gives you more control and the look will remain static however as mentioned when switching resolutions everything will be displayed larger or smaller.

share|improve this answer
    
Well as for me, I have a picture background, and my navigation bar collided with the words at the top of the picture on my large monitor after I coded it on my laptop monitor (smaller). –  Norm Feb 17 '12 at 5:13

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.