Container width in pixels or percentages

Get Started
1

Hi guys

I read somewhere that if you specify the width of a #container as a percentage, and then set the right and left margins to auto,
it will centre the container on the page.

Having previously used pixels to space from the left without auto-margins, I tried out the method above and indeed it did centre the container on the page. But I noticed that when I resized the window, the content on my page fell out of place. For example, some pictures were overlapping the container, and some text had moved. But I did not have this problem when I used pixels to set the margins.

Does it matter what method is used, is it best practise to use the first method?

Thanks a lot for your thoughts.

2

Hey

What you’re basically talking about is fixed vs. fluid. Fixed is your first method and fluid is the second.
When using the fluid method and re-sizing the window, things should not fall out of place, should it be coded correctly.
For more information have a look at this post.
If you have any questions about a particular page where this problem is happening feel free to give us a link and we’ll gladly help you out.

3

Thanks for your response and for the reference, which is really useful.

I had not used a fluid maximum width on images, so my images weren’t scaling down. I’ll try this out later,
and post back if the problem persists.

4

You could also go with an elastic layout (em) where the page’s width is controlled by the font size.

5

You can also use min-height, min-width, max-height, and max-width in conjunction with a liquid layout that will ensure boxes that shouldn’t scale to infinity stay a reasonable size; say text columns that look bad if they get too wide or thin.

6

You don’t need to specify the width as a percentage - you can use px or em and the method will still work. It just needs a width set on the container; how you set that width is up to you.