Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

CSS layout techniques

Tuesday, October 8th, 2013 by Servage

Page Layout Strategies

Before we start dissecting CSS layouts, let’s talk about the various options for structuring a web page. As you know, web pages appear on browsers of all sizes, from tiny phone screens to cinema displays. In addition, users can resize their text, which has an impact on the layout of the page. Over time, several standard page layout approaches have emerged that address these issues in various ways:

• Fixed layouts stay put at a specific pixel width regardless of the size of

the browser window or text size.

• Fluid (or liquid) layouts resize proportionally when the browser window

resizes.

• Elastic layouts resize proportionally based on the size of the text.

• Hybrid layouts combine fixed and scalable areas.
Fixed layouts
Fixed layouts, as the name implies, are created at a specific pixel width as determined by the designer. Akin to print, they allow the designer to control the relationship of page elements, alignment, and line lengths (see the sidebar Optimal Line Length). This layout approach became popular due to the fact that folks have traditionally viewed the Web primarily on desktop monitors with ample real estate, and web designers were keen on reproducing designs that looked exactly the same on every screen. But as you know, times are a’changin’, and we no longer make those assumptions or strive for pixel perfection.

When you design a page to be a specific width, you need to decide a couple of things. First, you need to pick the width, usually based on common monitor resolutions. As of this writing, most sites are designed to be 960 pixels wide or thereabouts to fit nicely in the most common 1024 × 768 monitor resolution. Some designers keep their layouts narrower; some venture even larger as monitor resolution increases. Either way, it is a design decision.

You also need to decide where the fixed-width layout should be positioned in the browser window. By default, it stays on the left edge of the browser, with the extra space to the right of it. You can also center the page, splitting the extra space over left and right margins, which may make the page look as though it better fills the browser window. Figure 16-1 shows two fixedwidth layouts, positioned differently in the browser window.

One of the main concerns with using fixed layouts is that if the user’s browser window is not as wide as the page, the content on the right edge of the page will be hidden. Although it is possible to scroll horizontally, it may not always be clear that there is more content there in the first place. In addition, although the structure of the page doesn’t change, if a user has text set to a very large size to make it easier to read, there may be very few words on a line and the layout may look awkward or break altogether.

How to create fixed-width layouts

Fixed-width layouts are created by specifying width values in pixel units. Typically, the content of the entire page is put into a div (often named “content,” “container,” “wrapper,” or “page”) that can then be set to a specific pixel width. This div may also be centered in the browser window. Widths of column elements, and even margins and padding, are also specified in pixels.

jnj

CSS layout techniques, 4.5 out of 5 based on 4 ratings
Categories: Guides & Tutorials, Tips & Tricks

Keywords: , ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.