Page layout with CSS
Types of Web layout
Page layout is the process of composing text, image and negative space on the page to produce a balanced, and harmonious visual impact that would allow for a collaboration of the author of the text, the artist of the design and the reader to construct collectively a meaning and a message for the text.
Guity Novin, artist, in ArtAct: Chapter 58 Chapter 58 ; History of Layout Design and Modern Newspaper & Magazines
- That is, "layout" refers to how the components of a document are arranged on the page/screen.
- It's a concept that has been around since the early days of printing.
- The earliest web pages had only a one-column layout that filled the width of the screen
- Designing layout for a web document is different from layout for a printed document because your page must be usable on many different types of browsers and sizes of screens and windows - phones and tablets and 30" monitors and more.
- Several standard types of page layouts have been developed
- 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 width layout
A fixed width layout has a specific page width, normally in pixels. No matter what screen resolution the visitor has, he or she will see the same width as other visitors.
Fixed layouts are easier to make and provide more assurance that what the designer sees, the user sees. However, A fixed-width layout may create excessive white space for users with larger screen resolutions.
It's a very common design choice. Many sites use this layout model. (CSS Zen Garden - Shaolin Yokobue Theme)
Liquid or fluid layout
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.
It is also a common design choice (CSS Zen Garden - Tranquille Theme)
Fluid web page design can be more user-friendly, because it adjusts to the user's set up. Some examples are:
- Lecture notes.
- Google Maps and many other Google sites
- The First CSS Zengarden design
To create a fluid width layout, you just give the blocks percentage widths - or omit widths altogether.
Elastic page layouts
- Elastic layouts expand or contract with the size of the text.
- If the text is zoomed, the box that contains it adjusts proportionally.
- It is a less common design choice (CSS Zen Garden - Elastic Lawn Theme)
- The advantages are
- it provides a consistent layout experience while allowing flexibility in text size.
- It provides tighter control over line lengths than liquid and fixed layouts..
- Its weaknesses are
- Images and videos don't automatically rescaling along with the text and the rest of the layout .
- The width of the layout might exceed the width of the browser window at largest text sizes.
- Not as useful for addressing device and browser size variety.
- More complicated to create than fixed-width layouts.
- To create an elastic width layout, you give the blocks widths in ems.
Hybrid Layouts
- Hybrid layouts use a combination of pixel, percentage, and em measurements
- It's a compromise that is popular for many designs, especially for pages with a fixed-width sidebar for navigation.
- Many liquid pages such as CSS Zen Garden - Tranquille Theme are really hybrid, because they have some fixed-width components.
Planning a layout
Before starting coding, you should
- plan how you want to organize your page layout.
- Sketch it on paper.
- Or make a mock-up using a tool such as Inkscape or PowerPoint.
- Decide what will be the major content blocks.
Floated columns
Most layouts are organized in columns, typically with a header and footer section spanning the full width of the page at top and bottom.
There are many different approaches to creating columns.
Example 1. A basic two-column layout: The blocks.
The typical two-column page has four components: a header across the top, left and right columns, and a footer across the bottom.
Without added positionling, the blocks are rendered one after the other.
Basic content blocks for a two-column page with header and footer.
<div id="header"> Two column Layout --- header </div> <!-- end header --> <div id="column1"> column_1 content </div> <!-- end side --> <div id="column2"> column_2 content </div> <!-- end content --> <div id="footer"> footer content </div> <!-- end footer -->
Be sure to look at the source code. The structure is the same as listed above, with the extra Lorem Ipsum text shown in the screenshot.
Example 2. A basic two-column layout: Floating one column.
To create columns, we can float the first column div to one side - in this case, the left.
#column1 { width: 50%; float: left; margin: 1em; } #header, #footer{ clear: both; margin: 1em; }
The linked copy has the first div floated to the right instead of the left. The only change from the screenshot is the direction of the float.
Notice that:
- The content in the second div flows up past the first one, creating columns.
- The "clear: both" property on the footer ensures that the footer text will not flow up into the column.
- Because the second div has more text, it wraps under the first - normal behavior for float.
- The positioning of the two columns doesn't depend on order of the blocks in the source code; we can float the first div to either side.
Example 3. A basic two-column layout: Avoiding the wrap-under problem with a margin.
One way to solve the wrap-under problem, is to give the second div a left (or right) margin that is the same as the width of the first one.
#column2 { margin: 1em; margin-left: 52%; /* Additional style rule */ }
The linked copy has the first div on the right and a right margin for the second div. Be sure to look at the source code.
Example 4. A basic two-column layout: Avoiding the wrap-under problem with a column width.
In example 3, one column is sized and floated while the second simply flows into the empty space. Another approach to creating columns is to size and float both of them.
The first attempt might be to give both columns a 50% width.
#column1 { width: 50%; float: right; margin: 1em; } #column2 { width: 50%; float: left; margin: 1em; }
But the two blocks don't fit! 50% is the size of the text content - the margins are added, making each box more that 50%.
When Sizing all the block in as layout, it is critical to take margins, padding, and borders into account in the planning.
If we want each column to occupy approxiately half the width, and have padding, we need to make the size less than 50%.
Furthermore, if we leave the margins at 1em, the problem will reappear if the window width is reduced too much. So we will use percentages for the horizontal margins.
#column1 { width: 45%; float: right; margin: 1em 2.5%; /* Top + bottom Right + left */ } #column2 { width: 45%; float: left; margin: 1em 2.5%; /* Top&bottom Right&left */ }
We could also have given the column a fixed size in pixels and given the second column the same amount as margin.
Example 5. A typical layout model - the sidebar column.
- A common page design is to have a narrow, fixed-width column, called a sidebar, on one side and a wider one for the main content.
- The sidebar often contains navigation links.
- To make the sidebar distinctive, it is often given a different background color.
Here's the next version, with the first column fixed at 150px wide, and with background colors added.
#sidebar { width: 150px; float: right; background-color: gray; } #content { margin-right: 150px; background-color: silver; }
Because the box for a block is only as high as the text content, the columns look uneven.
There are several ways to address the problem. In all of them, we need to keep in mind that we are dealing with floated boxes, not true word processing/typesetting columns.
Faux Columns
This popular technique uses a background image for the page to create the illusion of full-length columns—thus the name Fake Columns. The blocks are floated into position over it.
The technique can be used for both fixed-width and liquid designs.
- The single background image is repeated vertically.
- Its patterns correspond to the columns.
Example 6. Faux Columns
In this example
- The sidebar is floated to the left, the main content flows in on its right.
- The sections are enclosed in a container div - often called a wrapper.
- The image is used as the background for the wrapper div.
- The blue portion of the image is 130 pixels wide. (It is scaled in the illustration.)
- The width of the left sidebar div is 125 px + 5px padding
- The content (right) div has a left margin of 130px.
#wrapper { border: solid gray; background-image: url(backgroundStripe.gif); background-repeat: repeat-y; }
Link to the example page Be sure to view the source code
Using a wrapper
In the preceding example
- The wrapper enclosed all four blocks, inlcuding the header and footer.
- The background color on the header and footer hides the stripe.
Proportional faux Columns
The previous faux columns example used a background with a stripe that matched fixed-width sidebar column.
But what if we want a truly fluid layout with both columns free to adjust in width?
The distinctive characteristic of percentage background positioning - the point on the image with that percentage coordinate is matched with the point on the box with the same percentage coordinate- is very useful in creating proportional faux columns.
So we just create our background image with the desired proportions and position it proportionately.
Example 7: Proportional faux columns
- This example places the wrapper around only the two columns, not the header and footer.
- The actual image is 1600px wide, to accommodate most single monitors.
#wrapper { border: solid thick gray; background-image: url(wideStripe.gif); background-repeat: repeat-y; background-position: 50% 0; /* Horizontal 50% point on the image at 50% point on box. */ overflow: hidden; } #primary { width: 45%; float: right; padding: 2.5%; /*all four sides*/ } #secondary { margin-right: 50%; padding: 0.5em 0 0.5em 5px;
Link to the example page Be sure to view the source code
Three-column layouts
Fixed width layout
- A fixed-width three-columns layout is fairly easy to achieve because you can give precise sizes to all the columns.
- The big challenge is to ensure that the columns don't move out of position when the window is narrowed.
- It is important to remember that the size applies to the content (text) only and does not include margins, padding, or borders.
- CSS Mastery has a detailed discussion. Be sure to read Chapter 8 in that book.
Liquid/Fluid layout
There are multiple approaches to creating a 3-column liquid layout.
Example 8: Three-column fluid layout using padding.
- We'll look at the version introduced by Matthew Levine in "In Search of the Holy Grail."
- The basic structure has one wrapper around three columns.
- We put the main content column (id="center") first in the document code, because it is the most important.
- The sidebars will be fixed width, the center fluid.
- All three columns will be floated into place.
The blocks
The basic blocks for the layout are
<div id="header"></div> <div id="wrapper"> <div id="center" class="column"></div> <div id="left" class="column"></div> <div id="right" class="column"></div> </div> <div id="footer"></div>
Link to the example 8 unstyled version.
Moving the blocks into place
The secret to the layout
- Put wide padding on the wrapper, matching the desired width of the left and right columns.
- fill the content area of the wrapper with the center main content.
- Give the left column a width and negative left margin to let it float in over the left padding beside the center.
- Give the right column a width and negative right margin to let it float in over the right padding beside the center.
#wrapper { padding-left: 200px; /* Left width */ padding-right: 150px; /* Right width */ } #wrapper .column { position: relative; float: left; } #center { width: 100%; } #left { width: 200px; /* Left width */ right: 200px; /* Left width */ margin-left: -100%; } #right { width: 150px; /* Right width */ margin-right: -150px; /* Right width */ } #footer { clear: both; }
Link to example 8 with fixed-width sidebars added.
This layout will break if the window becomes too narrow—experiment with changing the window to see what happens.
One solution is to give the body a minimum width.
body { min-width: 550px;
Experiment using "CSS » Edit CSS" on the Web Development Toolbar, or by saving a copy of the page, and add the minimum width.
Adding Padding
At this point, the example has three columns, but the text is crammed in and touches because there are no margins or padding.
This becomes dramatically obvious if you add "text-align: justify" to the style rules for the columns. (Try it!)
Adding padding requires careful planning, because it changes the total width.
In his article, Levine:
- adds 10px of horizontal padding to the sidebars
- keeps the total width of each sidebar the same by reducing the width of the content box
- adds 20px of horizontal padding to the center column
- adjusts the positionings by including the center column padding in
- the calculations for min-width
- the width of the right wrapper padding
- the left column positioning
- the right column positioning
Link to the example with padding added.
Be sure to read the article for a thorough discussion of how it's done.
Proportional-width sidebars
Example 8 used fixed-width sidebars with a proportional center column. What if we want all three to be proportional, for a fully liquid layout?
The strategy is similar, but there is one additional complication—percentage widths are relative to the block.
Thus percentage widths on the wrapper are determined by the wrapper's width; Percentage widths on the each column are determined by the column's width.
Example 9: Proportional three-column layout.
We'll begin with setting the desired widths for the sidebars in relation to the page.
#wrapper { padding-left: 20%; /* Left width */ padding-right: 15%; /* Right width */ }
The three column blocks flow into in the center content box area of the wrapper.
- The width of the left and right sidebars will be a percentage of the wrapper content box, NOT of the total wrapper width.
- The center area is 65% of the total—the other 35% is padding.
- We want the left sidebar to occupy 20% of the TOTAL width.
- Using width: 20% will NOT work, because it will be 20% of the 65%. That is .2 x .65 = .130 which is only 13%.
- We have to solve width x .65 = .2, or width = .2/.65 = .308.
- So we need to use width: 30.8% as the rule.
- Similarly, the right sidebar width needs to be 23%.
#left { width: 30.8%; /* Left width */ right: 30.8%; /* Left width */ margin-left: -100%; } #right { width: 23%; /* Right width */ margin-right: -23%; /* Right width */ }
We don't need to worry about the layout breaking without a min-width, because the columns all adjust.
However the text becomes unreadable if the window is too narrow, so we will include a min-width anyway.
Because extremely long lines of text are difficult to read, we will also add a max-width.
body { min-width: 600px; max-width: 1000px; }
Our proportional-width layout still needs padding.
It would be nice to specify padding in pixels or ems, but we would not be able to determine the total widths - unfortunately CSS doesn' let us use something like 50% + 2em.
So we would have to make the padding proportional as well. The calculations are even more convoluted than the ones for the column widths!
Setting styles
There is no such thing as "no styles" in a graphic browser. Each browser is preconfigured with default settings.
- You should NOT rely on those default settings for your pages. You should control all elements of the document.
- The best way to ensure that you are not making assumptions is to begin with a set of rules that set all common properties to "bare-bones" values.
- Here is a model reset stylesheet, adapted from on on Eric Myer's Tools site
- You can clear the browser default styles by having it as the first linked stylesheet.
- You could also begin your stylesheet with "@import reset.css;" to import it as the initial set of rules.
/* A stylesheet designed to set all properties o a minimal standard. It eliminates unpredictable variations caused by different browser defaults. Use it as the first linked stylesheet in a document or @import it at the beginning of your custom stylesheet. Then in your custom stylesheet add rules to create the design you want. */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; }