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?

  • It's elastic layout vs fixed layout, and not all pages benefit from the former. See this
    – treecoder
    Feb 17, 2012 at 4:25
  • You forgot em. Favour em over px
    – Raynos
    Feb 17, 2012 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?

  • 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, 2012 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. Feb 17, 2012 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, 2012 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. Feb 17, 2012 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, 2012 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.

  • 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, 2012 at 5:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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