How to Modify the Layouts in CSS3 - dummies

How to Modify the Layouts in CSS3

By John Paul Mueller

It pays to try a few of the CSS3 layouts to see what you want to do with them before you begin creating a production project. Copy the source code from the example on the Dynamic Drive site and place it into files as you expect to use it.

For the purposes of this example, you create an HTML5 file with the following content obtained from the HTML code shown with the example. (You can find complete code for this example in the Chapter 07 folder of the downloadable code as TwoColumnLayout.HTML.)

<!DOCTYPE html>
 <title>CSS Fixed Layout #2.1- (Fixed-Fixed)</title>
 <link rel="stylesheet" href="TwoColumnLayout.CSS" />
 <div id="maincontainer">
 <div id="topsection">
  <div class="innertube">
  <h1>CSS Fixed Layout #2.1- (Fixed-Fixed)</h1>
 <div id="contentwrapper">
  <div id="contentcolumn">
  <div class="innertube">
  <p><b>Content Column:
 <div id="leftcolumn">
  <div class="innertube">
  <p><b>Left Column: <em>200px</em></b></p>
 <div id="footer">

The example adds white space to the code provided on the Dynamic Drive site for the purposes of making it easier to read and also to show how the structure is created using the <div> tags. You should do the same thing with any code you obtain from the site. You want to be sure that you understand how the layout works before you begin performing any required modifications.

The example removes the Dynamic Drive scripts because you don’t need them to fill the sections with random content. However, it does add notes showing the number of pixels used by default for each of the sections (the Dynamic Drive example only notes the size of the fixed left column).

If you modify the CSS for this site, you should also change the notes you create about the fixed column sizes.

The example also uses an external CSS file. Notice the addition of a <link> tag in the <head>. The CSS for the external file is unchanged from the <style> tag for the example page as shown here.

line-height: 1.5em;
b{font-size: 110%;}
em{color: red;}
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
background: #EAEAEA;
height: 90px; /*Height of top section*/
#topsection h1{
margin: 0;
padding-top: 15px;
float: left;
width: 100%;
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
float: left;
width: 200px; /*Width of left column*/
margin-left: -840px; /*Set left margin to -(MainContainerWidth)*/
background: #C8FC98;
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
#footer a{
color: #FFFF80;
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;

At this point, you can load the page to start thinking about what you’d like to modify. Here is the page as it appears without modification after copying it from the site and separating the HTML from the CSS.


The first option you’ll want to change is the colors used for the various objects. Of course, the colors need to match the color scheme for your site. The templates use hexadecimal color representations. You should modify them to match those used by other templates on your site (if necessary).

Templates that rely on fixed column widths may require tweaking to work with the rest of your site. To change the overall width of the page, you modify the width property of the #maincontainer style. The left pane width is controlled by the width property of the #leftcolumn style.

The content pane size is the difference between the #maincontainer style width and the #leftcolumn style width. Dynamic Drive tends to use consistent naming, so a layout that uses the right column for links would have a #rightcolumn style that you modify to change the width of that column.

If you change the size of the #leftcolumn or #rightcolumn styles, then you also need to change the margin-left property of the #contentcolumn style to match.

The height of the top section is only 90px. This could cause a problem when working with a larger header. Change the height property of the #topsection style to make it compatible with other headers on your site.

Likewise, the footer lacks an actual height, so you may need to modify it by adding a height property to the #footer style to ensure each page of your site looks the same.

These templates also rely on both the <b> (bold) and <em> (emphasis) tags. Although both tags are still supported by HTML5, there’s a strong warning with the <b> tag to use it only as a last resort.

If you plan long term use of these templates, it would be a good idea to replace the <b> tag entries with the <strong> or <mark> tags, or better yet, just avoid using the <b> and <em> tags completely in favor of CSS formatting.

These tags are leftovers from the days before CSS made it possible to add various forms of emphasis and bolding using the font-style and font-weight properties. The example shows the tags intact, but the recommendation is to remove them and use other kinds of formatting instead.