Why do websites often have spacing on either side of the content?

Question

Hi, I have observed that many sites have left some spaces on both sides of the page. What is the reason behind it? Is it a part of web design standards?

Answer 1

It's easier to read text if it isn't touching the edges of a window.

Answer 2

You typically want your content to display reasonably on all reasonable sized monitors without requiring horizontal scrolling. One way of doing this is to make sure your content goes no wider than a certain number of pixels (say 760 ish for 800x600 monitors or 960ish if you want to target 1024x768 as your minimum monitor size).

The other option is "liquid" layouts that stretch to the browser window's size, but these are typically harder to code and are often equally undesirable for very large monitors (do people really want a website to be stretched across a 1900x1200 resolution?).

Answer 3

Usually you center your website "wrapper" in the middle of the screen through css:

#wrapper { width:960px; margin:0 auto; }

<div id="wrapper">content</div>

Answer 4

Hmm, I can think of a good place for this that may or may not exist yet, that is not StackOverflow ;-) But anyway: that's because people have an easier time reading lines of text that are no more than 68 characters long. (Or something like that) The human eye can only take in so much at a time, and if you make your text too wide, people will lose track of the left side of the line once they get over to the right side, which makes it harder to read. Basically, you want the entire width of the text to fit within one field of view (for some definition of "field of view").

Answer 5

Its the debate about fixed Vs fluid layouts. There are plenty of discussions which cover this topic. To name a few:

• Smashing Magazine
• Flyte
• About.com

In a nutshell:

Fixed width

A fixed website layout has a wrapper that is a fixed width, and the components inside it have either percentage widths or fixed widths. The important thing is that the container (wrapper) element is set to not move

Fluid width

In a fluid website layout, also referred to as a liquid layout, the majority of the components inside have percentage widths, and thus adjust to the user’s screen resolution.

Your question was regarding the fixed layout and its pros, to name a few:

• Fixed-width layouts are much easier to use and easier to customize in terms of design.
• Widths are the same for every browser, so there is less hassle with images, forms, video and other content that are fixed-width.
• There is no need for min-width or max-width, which isn’t supported by every browser anyway.
• Even if a website is designed to be compatible with the smallest screen resolution, 800×600, the content will still be wide enough at a larger resolution to be easily legible

.

Answer 6

There is space in both side of the pages. this is because you set a specific size for your page and align itto center to make sure your visitor see it.

On the other hand, there are some size which using widely, fore example you can see lots of websites with 950px, 1000px and 995px width, it is because of a common law that provide a better look for your website in 1024 resolution.

Answer 7

My preference is to use liquid layout up to some reasonable width (say 1024 pixels), after which use fixed width. For more info and code explaining how to do this, see: How to optimize web page width.

Answer 8

http://www.thereisnopagefold.com/