Web Page Layout With CSS: No Tables or Frames!

In previous HTML Tutorials, we have spoken about using Tables and using Frames to create a page layout. At the same time we wrote about how you really shouldn’t be using those techniques any more. Frames should simply not be used as they are not the HTML5 Specification and Tables should be used for information which lends itself to a tabular format – not the entire page.

So how should you create your HTML pages now? The short answer: HTML5 and CSS! This tutorial will guide you through creating a simple page layout with CSS without using tables or frames. It will also introduce you to a new concept – that of a column-system. This will pave the way for an introduction into grid systems for page layout and responsive web design.

But one step at a time! This is a long tutorial, so if you want to get a coffee, I will completely understand!


Jump To: The HTMLThe CSSCSS for NavigationCreating Columns


Setting Up Your HTML5

We are going to create a ‘standard’ web page layout – with a header, a left side navigation, a content area and a footer. This is what we are aiming for, so you can see where we are headed:

Simple Page Layout With CSS - No Frames or Tables!

So we will go ahead and create a basic HTML5 page layout but define a few classes on the way. I will explain it step-by-step, but first here’s the code snippet:

<!DOCTYPE html>
<html>
 <head>
  <title>Basic Fixed-width CSS Page Layout Example - resource-centre.net</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
  <style type="text/css">
  </style>
 </head>
 <body>
  <div class="container">
   <header>
    <big>Example Page Layout With CSS</big>
   </header>
   <nav>
    <a href="#section1">Section 1</a>
    <a href="#section2">Section 2</a>
    <a href="#section3">Section 3</a>
   </nav>
   <article>
    <h1>A Better Approch Than Tables or Frames</h1>
    <p>
     This working file is a <strong>fixed-width layout</strong> made possible through the use of HTML5 tags and CSS3.
    </p>
    <p>
     You can use this instead of tables or frames. Feel free to adapt this as much as you want to make your own website layout.
    </p>
    <hr>
    <h2>Dividing The Page Into Sections</h2>
    <section>
     <div class="thirds">
      <p>
       You can split up your content into columns, but be careful of not exceeding 100%.
      </p>
     </div>
     <div class="thirds">
      <p>
       If you do, you will find one of your intended 'columns' is pushed underneath the others.
      </p>
     </div>
     <div class="thirds last">
      <p>
       This may take some tweaking of the <strong>width</strong> and <strong>margin-right</strong> properties.
      </p>
     </div>
    </section>
    <hr>
    <h2>Go Halves</h2>
    <section>
     <div class="halves">
      <p>
       You can equally divide the page into halves. Just bear in mind that your 100% is a total of your
       column width percentages and your margin percentages.
      </p>
      <p>
       We have used a <strong>.last</strong> class to ensure there is no <strong>margin-right</strong> on the final column so it sits flush to the right of our site.
      </p>
     </div>
     <div class="halves last">
      When in doubt, do the maths.<br>
      <ul>
       <li>2 Columns at 49% = 98%</li>
       <li>Add one margin right at 1%. Total is now 99%;</li>
       <li>This means for 50% width in this case you should have done: (100% - 1%) divided by 2 = 49.5%</li>
      </ul>
     </div>
    </section>
   </article>
   <footer>
    Example Code Courtesy of <a href="http://resource-centre.net" title="The Free Tutorial Centre">The Free Tutorial Centre</a>
   </footer>
  </div>
 </body>
</html>

The HEAD Section
Nothing ground-breaking at the top of this code: we simply start a HTML5 document off, use a <link> tag to pull in a font from the Google Font Library (See:How to use @font-face tutorial) and start an empty <style> tag.

The BODY Section

  • Set a container: as we will be creating a fixed-width layout (i.e. not mobile-friendly) we want to ensure that everything is contained within certain limits. Using a HTML <div> Tag (which just divides off an area of the page) we have given is the .container class. We will use CSS later to format it.
  • The header and footer of our site are set with HTML5’s <header> and <footer> tags.
  • We have used HTML5’s <nav> </nav> tags to show where our site’s navigation will be. Inside that I have just placed 3 links pointing to anchors (which by the way don’t exist, they are just there for demonstration).
  • As you can see from the screenshot above, the next section I want to divide up into 3 columns. So I have wrapped all these columns inside <section> </section> tags and then each column is given a CSS class .thirds.
  • A similar approach is taken for the two-column section.
  • The last column in each set I have also added the CSS Class .last to show that it’s the last one in the row.

And we are done! Let’s move onto the CSS.

Defining Your HTML5 Layout With CSS

Again, here’s the CSS Code Snippet and we’ll go through it steadily:

 /* over all rules */
*{
 box-sizing:border-box;
}
html,body{
 margin:0;
 padding:0;
 background:#ddd;
 color:#333;
 font-family:'Open Sans','Trebuchet MS','Arial',sans-serif;
 font-size:14px;
}
.container{
 width:1200px;
 float:left;
 position:relative;
 left:50%;
 margin-left:-600px;
 background:#fff;
 padding:10px;
}
a{
 text-decoration:none;
 color:#c33;
}

CSS: border-box – Why This is Important

The first line starts with *{ }. This means to apply whatever is between { } to all elements on the page. The reason for this is that different browsers process the space inside and outside elements in different ways. So, for example, if we want to set our site to be 1200px wide but give is 20px padding, many browsers will add that onto the 1200px making your site effectively 1240px wide. That makes measuring how wide everything else should be much harder. What box-sizing:border-box; does is say that your actual widths should be honoured regardless of other settings, like padding.

html, body

Nothing unusual here – just setting some colours and fonts. We also use padding:0;margin:0; in case any browsers try to create an artificial space between the edge of the browser and our web page.

.container

This defines the outside edge of our page. We set up class on <div class="container"> earlier, so these rules apply to this. We set the width as 1200px, give it a 10px space between its edge and everything inside and give it a contrastic background colour to the body so we can see it clearly.

Centering Your DIV
As we will be using DIVs instead of tables or frames, we need to ensure items ‘wrap’ properly around each other. So for that reason we have used float:left;. In order to center it, I will explain things slowly.

  • position:relative; – a detailed explanation over CSS’s position property will have to wait until another time. But by setting this as relative it means it will be placed on the page relative to other items on the page. This is instead of, say, defining exactly the pixel coordinates we want to place it on. As we don’t know how big anyone’s screen is, it is safer to do it this way, for now.
  • left:50%;margin-left:-600px; – to get it centred, we need to shift the whole thing to the middle. Sounds obvious, but it kind of isn’t! Because we don’t know how big your website visitor’s screen is, we need to use a percentage to bring it to the middle. This left property will not work if you do not have position:relative; set. The problem with left:50%; is that your left edge of your container will be in the middle of the screen, causing your whole site to be sat in the right half of the browser. Not cool. So we then use margin-left:-600px; which is half of our container’s width to shift it back a little bit, so that the middle of our container is in the middle of the screen. Have play with the left and margin-left values to see how they affect your site’s position.

Header and Footer

 /* header and footer */
header,footer,article,nav,section{
 float:left;
 padding:10px;
}
header,footer{
 width:100%;
}
header,footer{
 background-color:#333;
 color:#fff;
 text-align:right;
 height:100px;
}
header{
 font-size:1.8em;font-weight:bold;
}
header big{
 line-height:130px;
 vertical-align:bottom;
}
footer{
 background-color:#999;
 text-align:center;
 height:40px;
}
footer a{
 text-decoration:underline;
 color:#fff;
 font-weight:bold;
}

As with all elements, we want to control how the items wrap around each other, so these elements all float:left;. Both the header and the footer we want to be 100% of the width of our container, so this is set here as well.

Using line-height in the header

Most headers will have more than one line of code in them. Common features these days include:

  • Contact Information
  • Company Logo
  • Social Media Buttons
  • Logins and Cart etc for e-commerce sites

Because this is a simple layout, I wanted to show a fairly deep header, but put the text at the bottom of that header. So I have used the line-height on the <big> text, and set it to 130px. That means one line of text is the same depth as the header, give or take.

vertical-align can take: top, middle, bottom, baseline. Without going into too much depth this is the ‘alignment’ between the top of the line and the bottom. So to put this at the bottom of our 130px deep line, we use vertical-align:bottom;.

Targeting Links in a Specific Section

We have already set the ‘default’ link style with this line, from earlier: a{ text-decoration:none;color:#c33; }. However, that shade of red over the grey of the footer would be really hard to read. In order to target the links only in the footer, we use a ‘CSS Hierarchy’, which works like this:

[parent element] [sub element]{ }

So to target all <a> tags in the footer we can use footer a{ }. Which is what we have done here.

CSS for the Site Navigation

The next snippet may seem like a lot of code, but if you check out Turning Links into Buttons tutorial, we have basically just followed a similar path here.

/* navigation on the left hand side */
nav{
 text-align:center;
 width:24%;
 margin-right:1%;
 border:1px solid #ccc;
 margin:5px;
}
nav a{
 display:block;
 width:100%;
 background-color:#c33;
 color:#fff;
 height:30px;
 margin-bottom:10px;
 padding:10px;
 border-radius:
 3px;
 line-height:10px;
 vertical-align:middle;
}
nav a:hover,nav a:active{
 background-color:#226;
}   

The additional things to note are:

  • The width of the navigation is set to 24% with a 1% margin right. This makes the navigation take up 25% overall but leaves a space between it and the <article> tag.
  • Each link in our navigation is set to 100% so it is a ‘full width’ button.
  • To put a space between each button and the one underneath it, we have set a margin-bottom

Nearly there, that just leaves our column layout!

Basic Column Layout in CSS

/* <article> tag is our 'content area' */
article{
 width:75%;
}
h1{
 padding:0;
 margin:0 0 20px 0;
}
/* section */
article section{
 padding:0;
}
/* basic page column layout */
.halves,.thirds{
 width:49%;
 float:left;
 margin-right:2%;
}
.thirds{
 width:32.66666%;
 margin-right:1%;
}
.last{
 margin-right:0;
}

Firstly, we tell our page that we want the <article> tag to take up the remaining 75% of our container. We also re-set how our <h1> tags work – this one’s optional, but try it without doing this to see the difference.

2-Column Layout

You might think this should simply be width:50%; but you would not be allowing for space between your columns. Whitespace is really important in web page layout! So instead we want to have a gap between them. Making width:49%; over two columns means we are using 98%, leaving the remaining 2% for our margin-right.

3-Column Layout

A little tricker, but because 3 is an odd number we end up with some decimals when doing our maths. If I want a 1% margin between my columns – I have two ‘gaps’ between columns. This means I have 98% left for the columns themselves – 98% divded by 3 = 32.6666%.

The Last Column

Our final issue is that all our columns currently have a margin-right set – even our last column. Doing this trips the total width over the 100% mark, which will look messy. Earlier we added a class="thirds last" to our final column. Now we can just set .last{ margin-right:0; } ensuring that we stay under the 100%.

TL;DR – Creating a Layout With CSS

This might seem like a long way to create something which is quicker with tables and frames. However, doing it this way, you are setting a strong foundation for:

  • Keeping with modern coding standards
  • Understanding column systems
  • Getting ready for mobile-friendliness

ou can download the CSS Layout Demo File Here. And as always, if you have any other questions, feel free to use the comments!

Spread the Word

Share This On Facebook Share This On Twitter Share This On Linkedin Share This On Google Plus Share This On Pinterest Share This On Mail

Leave a Reply

Your email address will not be published. Required fields are marked *