IT581: Practicum in Web Development, Summer 2015 (Hybrid)

  1. Syllabus
  2. Weekly Topics
  3. Resources
  4. Blackboard

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

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:

To create a fluid width layout, you just give the blocks percentage widths - or omit widths altogether.

Elastic page layouts

Hybrid Layouts

Planning a layout

Before starting coding, you should

  1. plan how you want to organize your page layout.
  2. Sketch it on paper.
  3. Or make a mock-up using a tool such as Inkscape or PowerPoint.
  4. 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 -->
missing image

Link to the example 1 page.

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;
            }
missing image

Link to the example 2 page.

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:

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 */
            }
missing image

Link to the example 3page.

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;
            }
missing image

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 */
            }
missing image

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.

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;
            }
missing image

Link to the example 4 page.

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.

Example 6. Faux Columns

In this example

         #wrapper {
            border: solid gray;
            background-image: url(backgroundStripe.gif);
            background-repeat: repeat-y;  
         }
missing image

Link to the example page Be sure to view the source code

Using a wrapper

In the preceding example

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

         #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;
missing image missing image

Link to the example page Be sure to view the source code

Three-column layouts

Fixed width layout

Liquid/Fluid layout

There are multiple approaches to creating a 3-column liquid layout.

Example 8: Three-column fluid layout using padding.

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

  1. Put wide padding on the wrapper, matching the desired width of the left and right columns.
  2. fill the content area of the wrapper with the center main content.
  3. Give the left column a width and negative left margin to let it float in over the left padding beside the center.
  4. 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:

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 */
        }
missing image

The three column blocks flow into in the center content box area of the wrapper.

missing image 
    #left {
        width: 30.8%;          /* Left width */
        right: 30.8%;          /* Left width */
        margin-left: -100%;
        }
    #right {
        width: 23%;          /* Right width */
        margin-right: -23%;  /* Right width */
        }
missing image

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.

/* 
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;
}
  1. IT 581 Home
  2. cs.hood.edu
  3. Blackboard
Comments to: dong@hood.edu
Last Modified: 20 July 2015. 13:26