2.1 Fixed Width

With Fixed Layouts the width of the page and other containing boxes are specified in fixed units such as pixels by a web designer. This type of layout will retain these widths regardless of the size of the browser window viewing the page (these are the layouts we've mainly been dealing with so far). When the viewport is resized, a smaller proportion of the original page section will be visible rather than elements collapsing to still be visible.

Benefits

  • Fixed layouts allow more precise control over positioning than with the other types of layouts;
  • They allow web designers to build pages that will look identical across different browsers and platforms;
  • Fixed width elements such as images will not overpower text on smaller monitors, because the width of the entire page will include those elements;
  • Scan length will not be impacted on large segments of text, no matter how wide the Web browser is;
  • Fixed layouts often seen easier to develop (pixel calculation can be easier than em calculation);
  • Browsers such as Opera and IE 7 are offering zoom support (though IE 7's still needs improvement) so flexible sizes may be less important;
  • Usually less background/decorative images are required for download (or at least less in number if not in overall size);
  • Sites that require precise control over how the pages look in every situation would do well to use a fixed width layout. This provides more assurance that the branding of your Web site is consistent and clear no matter what size monitor it's viewed on.

Drawbacks

  • Fixed layouts can cause horizontal scrolling in smaller browser windows. And most people don't like to scroll horizontally;
    • They can also result in large expanses of whitespace in larger monitors, resulting in a lot of unused space and more scrolling vertically than might otherwise be necessary;
  • Fixed width layouts don't handle customer changes to font sizes very well. For small increases in the font size, they can be okay, but for larger increases, the layout can become compromised;
  • They are fixed based on designer/developer’s choice not user’s;
  • Not all browsers support zoom, and text resizing may be required;
  • Text can overlap their original boundaries when resized. May make text hard or impossible to read.

Using the example from the previous page we could have stylesheet something like this:

body		{text-align: center;}

#wrap		{margin: 0 auto;
		width: 900px;}

#header 	{width: 900px;
		height: 100px;}

#content	{display: inline;
		float: left;
		width: 600px;
		margin-left: 150px;}

#leftbox	{display: inline;
		float: left;
		width: 150px;
		margin-left: -900px;}

#rightbox	{display: inline;
		float: left;
		width: 150px;}

#footer 	{clear: both;}

Here we have set fixed pixel-based lengths for all the main sections: header, content, leftbox, rightbox and footer. Remember in the HTML that the content was loaded in before leftbox and rightbox? These can now be positioned using a large left-margin on the content box and a negative margin on the left box to pull it back to the left (and yes, negative margins are allowed!).

The margin:0 auto line in the CSS simply sets the top and bottom margins of the "wrap" box to 0px and the left and right margins to automatically center this box in the browser. Note that some older versions of Internet Explorer ignore this, which is why we have added text-align: center; to the body, a root element.

Finally, the line clear: both in the footer box ensures the footer loads in below the other boxes rather than floating in after the last box (the left box), although in reality this would "spill" down to this position anyway.