Tableless CSS Layout With Dreamweaver (Mentorship Series)

Status of video for Tableless Layout Presentation

During this meetup, we video taped the presentation to present on this site. Just a FYI, like the Cubs, we’re still working on it. Look for an announcement on the Dreamweaver Meetup site once it is available.

…so what’s wrong with tables, again?

From the late 1990s through the early 2000s, HTML tables ruled in laying out web pages. Simple, high-level layout with two or three columns quickly led to more complex layout requiring nested tables and nested tables inside of nested table. Transparent GIF graphics were used to force tables to provide proper gutters or spacing between columns of content. It soon became clear that while using tables for layout was fairly easy, this sloppy ease came with a hefty price tag:

  • Intertwine of Structural Code and Content: Placing the structural and presentational HTML code in the midst of all the textual content created an inflexible, unmanageable and inaccessible page & site.
  • Code Bloat: Table-based pages required a lot of table-related code for the structure of the site. Many times, empty table cells would be used simply to create space. Below is a typical page layout with no content (left) and the code behind this layout, again, with no content (practically a blank page with no value (right).
Table-based layout (left), and the related HTML code (right)

Table-based layout (left), and the related HTML code (right)

  • Maintenance Nightmare: If trying to find content embedded within all that code isn’t enough, try a redesign, which takes anywhere from six to eighteen months. This is the reason why most redesigns would actually be redoing the site from scratch.
  • Content Order: Content hosted within a table is always accessed in a top down, left to right order. This means a three column table would be access in the order it was represented on the screen. This is not optimal for text-based browsers, screen readers (for the visually handicapped) and search engine crawlers.
  • Inflexible for non-web platforms: Try to print a table-based layout or view one on a mobile device and you’ll quickly experience the inflexible nature of table-based layouts,.

Ok, you now know why table-based layouts are not the way to go. So why migrate to a tableless CSS layout for your web design?

  • Less Code: Lighter pages with less code and all presentation in an external stylesheet allow pages to load faster, search engine robots to more easily digest your content and are easier to maintain and redesign in the future.
  • More Flexible Content Delivery: Want a site that ranks better in the search engines? Is easier for text browsers or assistive devices? Organically adapts to delivery on mobile devices? Go tableless.

Now that we know why we’re headed toward a tableless layout direction, let’s take a look at the different type of layouts. 

Types of Layouts

There are three primary types of layout for web pages:

  • Fixed-width
  • Liquid
  • Elastic

Fixed-width

fixed-widthFixed-width layouts are very popular with designers and developers, due to it’s rigid, “pixel-perfect1” nature. If your layout is set to 960 pixels wide, it will always be 960 pixels wide. They are also the easiest to work and get started with.

Now each layout type has it’s share of pros & cons. Let’s take a look at the strengths and weaknesses of fixed-width layouts.

Pros
  • Provides designers and developers the utmost in control.
  • Easiest to learn and work with
Cons
  • Fixed-width doesn’t adapt to wider screens & resolutions; and will generate a horizontal scroll bar at resolutions smaller than the fixed width.
  • While the layout works well with default font sizes, at increased user-defined font sizes, the line lengths can become too short.

Liquid Layouts

liquid-layoutLiquid layouts use percentages to determine widths instead of pixels. This method allows the layout to expand and contract according to the width of the browser window or the screen resolution. Liquid layout make for an efficient use of space.

Like fixed-width layouts, liquid layouts have their share of issues.

Pros
  • Better use of screen real estate
  • Flexible, allows the user to determine best width
Cons
  • Like fixed-width, line lengths can get too short at narrow window widths. This can be countered by adding a min-width to the layout to prevent it from getting too narrow.
  • Excessively long line lengths can occur when the window or layout are too wide. This can be countered using various techniques, such as max-width, limiting the container to a percentage more narrow than the full width of the window, adding extra padding, etc.
  • When the layout is liquid, static elements, such as graphics, images, or Flash movies may shift in position.

Elastic Layouts

elastic-layoutIf you desire a layout that accommodates text sizing, then Elastic Layouts are the answer. Elastic layouts are relatively based on the current font size. Therefore, when the font size increases, the layout grows to accommodate. And the reverse is also true.

As there are no perfect solutions, here’s a comparison of Elastic Layout strengths and weaknesses.

Pros
  • Layout scales as font size changes
  • Line lengths stay at reasonable lengths
  • Easier to create than liquid layouts
Cons
  • Like fixed-width layouts, elastic layouts don’t take full advantage of screen real estate
  • Elastic layouts can become wider than the browser window, forcing horizontal scroll bars

Elastic-Liquid Hybrid Layouts

Elastic-Liquid Hybrid approaches are very similar to a standard Elastic Layout, with the addition of setting the max-width with percentages. This method will eliminate the problem of the layout becoming wider than the browser window.

So What Layout Should I Use

Jared Spool would be proud of me when I answer with “it depends.” It really does depend on the site, the audience, who will be maintaining the site post-launch, when does the site need to be completed?

Here’s an example: let’s say you’re going to be creating a site where the audience is age 50 and above. That demographic most likely would benefit by having the ability to increase the font size of their browser window. In that case, an Elastic or Elastic-Liquid Hybrid may be the best choice. Likewise, if the audience are younger adults, say between 18 and 30, that market may more likely have wider screens, and benefit from a liquid layout that leverages more of the extra screen real estate.

Column Methods: Positioning vs. Floats

Most layouts contain multiple columns. The two most popular layouts are 2 & 3 column layouts. As there is no default method to creating columns, designers use one of two methods:

  • Absolute Positioning
  • Floating

Absolute Positioning

Absolute Positioning allows designers to place elements on a web page with pixel perfect accuracy. In using Absolute Positioning, you remove the content from the normal flow of the page. Major drawbacks to using absolute positioning include the initial steep learning curve and the fact that it is difficult/impossible to place a footer on a layout due to the lack of clearing. For this reason, I’ll concentrate on the more popular method of floating.

Floating

Float-based layouts are probably the easiest to learn and understand quickly. To use them, you set the width of the elements you want to position, then float them either left or right.

One thing to remember about floated elements is that they are removed from the normal document flow. Which means once an element is floated, everything after the floated element moves up to take the space the floated element once took. This usually leads to undesirable effects. So to counter this, an element after the floated element needs to be cleared. In the illustration below, you’ll see that the footer is used to clear the floats above.

floatlayout

There are many techniques used by designers to clear floats. Another popular method is to float the container of the floats. Confused? Don’t be, we’ll dig into this further in a bit to make it as clear as water.

Creating a Two-Column, Float-based Layout in Dreamweaver

Ok, all this high-level talk has brought us to actually creating a tableless CSS-based web page in Dreamweaver. As some people are WYSIWYG folks, others are coders, I’ll do my best to cover both aspects in the following example. For those WYSIWYG folks, I will say that it’s valuable to have a good understanding of what’s happening under the hood with your HTML & CSS code. So grab a cold one (milk, of course), and let’s get started.

Note: The method shown below is just one way to get to the intended goal. During the meetup session, a different method may be used. The more methods exposed to, the better.

Dreamweaver’s Pre-Installed CSS Layouts

When you create a new document in Dreamweaver CS3 or CS4, the New Document dialog box displays a lengthy list of CSS layouts that you can choose from. It’s a good idea to explore these, as studying the HTML structure and external CSS file can aid in learning tabeless CSS layout.

new-document

Each of these can be customized via the CSS to change the width, colors, etc.

Tableless CSS Layout from Scratch

For this example though, we’re going to start from scratch, with a blank HTML file. We’re also going to create a new blank CSS file to host our styles. Then, we’ll attach (link) the CSS file to our HTML file. Here’s how Dreamweaver should look at the moment.

Click to enlarge

Click to enlarge

We’re going to create a fixed-width, two column layout, with a header that spans the full width, a main content area divided into two section, a content area on the left, a supportive content area on the right. A footer finishes the layout at the bottom of the page.

goal-layout

We need to create the HTML structure of our document before we can work on the presentation layer to position and style our layout. To create the structure, we’re going to primarily use <div> tags with semantically meaningful IDs. So making sure my cursor is in the WYSIWYG view, from the Insert menu, select Layout Objects > Div Tag. The Insert Div Tag dialog box appears.
insert-div-tag
The Insert option allows us to place the <div> tag at our insertion point, or to wrap it around other selected code. We’ll just place the <div> tag at our insertion point. We do want to give our first <div> tag an unique ID. As this first <div> tag will act as a wrapper for our layout, let’s simply call it wrapper (see above). We could style this <div> tag now by clicking on the New CSS Style button, however we’ll tackle styling everything a bit later. So for now, click OK. You’ll notice that Dreamweaver, trying to be helpful, places some placeholder text in our <div>.

Click to Enlarge

Click to Enlarge

We now want to place our other structural elements into the wrapper. Next is our Header. So with the placeholder text selected, from the Insert menu, select Layout Objects > Div Tag. This DIV we’ll give the ID name of header. I’ll also type over the placeholder text with something meaningful, like My Header. Our page now looks as follows.

Click to Enlarge

Click to Enlarge

Now, our two-column layout is beginning to take shape. We now turn our attention to the content area, with our main content on the left & our supporting content on the right. We could simply place two <div> tags next, one for each of these sections. However, from experience, I know that it would be wise to wrap this content area in a <div> tag as well. Not to go into too much detail now, the reasons for doing it this way is

  • to provide a means for self-clearing the content section (more on this later), and
  • to allow for us to use a background imagine on the entire content section (again, more on this later)

So with the My Header placeholder text still select inside the header <div> tag, let’s insert a new <div> tag (Insert menu, select Layout Objects > Div Tag).

dw-screen-layout-041

This time, we’ll select After tag from the Insert drop-down menu. Automatically, the drop-down menu to the right selects our wrapper <div> tag. We want our content area to be within the wrapper <div> tag, so select the header <div> tag instead. Let’s give this new <div> tag an ID of main. Then click OK.

Click to Enlarge

Click to Enlarge

We now need our two content <div>’s within the main <div> tag. Insert <div> tags within the main <div> tag. Place the content <div> tag within the main <div> tag, and the supcontent <div> tag after the content <div> tag. Dreamweaver should now look like this.

Click to Enlarge

Click to Enlarge

The last section we need is out footer. Let’s insert a <div> tag just after the main <div> tag and give it a ID of footer.

Click to Enlarge

Click to Enlarge

That’s it. We have the main structure for our web page. We can now turn our attention to layout & styling the page.

Styling the Layout

Our attention now turns to Dreamweaver’s CSS Panel with it’s selectors and properties.

To start, we need to fix the width of our layout. A good width that works for browsers at 1024×768 and above is 960 pixels. We also want the layout to be centered on the page. To start styling with CSS, select the New Style Rule icon at the bottom on the CSS Panel in Dreamweaver.
new-css-style-button

The New CSS Rule dialog box appears.

new-css-rule

We’re styling the wrapper <div> tag, so make sure that’s select in the selector drop-down. We also want to make sure the style we create is stored in our My-CSS-File.css file that we created at the beginning. Once these selections have been made, click OK. The CSS Rule Definition dialog box now appears.
css-rule-definition

On the left side of the dialog box, CSS stylings are grouped into categories. Select the Box category. We want the width of our wrapper <div> tag to be 960 pixel. so under width, enter 960 and if not selected, select pixels. Now, under Margin we want to set the top & bottom margin to “0,” then set the left & right margin to “auto.” You’ll need to uncheck the option “Same for all” to select these individually. Click Apply. Now, we want to ensure that the text by default is set to left aligned. Select the Block category, then select the Text Align drop-down and select left. Click Apply. Then click OK.

To ensure that our layout is centered for some older browsers (IE 6 and below), let’s center the element immediately above the wrapper <div> tag, which is the <body> tag. Once again, select the New CSS Rule button at the bottom of the CSS panel, then under Selector Type, select Tag, then from the Tag drop-down menu, select body.

new-css-rule-02

Click OK. Now in the CSS Rule Definition dialog box for the body tag, select the Block category, then select center from the Text Align drop-down. Click Apply, then OK.

Previewing in a web browser, you’ll see our layout is now sized and centered. Note that I implemented a grey background color on the body tag and a white background color on the wrapper <div> tag so we can better see the progress being made.
dw-screen-layout-08
Now let’s tackle the header section. Click the New CSS Rule button and select the #wrapper #header ID, then click OK. Select the background category and next to the Background color label, either enter in the hex code #ffcc00 or click on the color picker box to select the desired orange color. Select the Box category and enter in a height of 100 pixels. Click Apply, then click OK. Here’s how it looks with the changes to the header height & background color..
dw-screen-layout-09

Now let’s turn our attention to our two content areas; content and supcontent. Content needs to be located on the left, and supcontent. To do this, we’ll float content left and supcontent right.

Select the placeholder text in the content area, then click on the

tag identifier in the tag breadcrumb trail in the status bar of the window in Dreamweaver.

dw-screen-layout-10

With the tag identifier selected, click the New CSS Rule button at the bottom of the CSS panel. The New CSS Rule dialog box should display “#wrapper #main #content” as the selector. Click OK. From the CSS Rule Definition dialog box, select the Box category, followed by 630 for the width in pixels, then under Float, select left. Click Apply, then OK.

Now lets position and style the supcontent div. Select the placeholder text in the supcontent area, then click on the

tag identifier in the tag breadcrumb trail in the status bar of the window in Dreamweaver. Click the New CSS Rule button at the bottom of the CSS Panel. In the New CSS Rule dialog box, the selector should display the selected Div ID (#wrapper #main #supcontent). Click OK. In the Box category, enter a width of 300 pixel and Float right. Click Apply, then OK. Our fixed-width, two column layout is taking shape. In the screenshot below, I’ve implemented a background color on both content Divs so you can see the two columns better.

dw-screen-layout-11

Now, I am aware of a problem with our layout. But I won’t cover it here. Let’s move onto our footer.

To style the footer div, select the text in the footer div, then select the <div#footer> tag in the tag breadcrumb area. Then click the New CSS Rule button in the CSS Panel. The selector #wrapper #footer should appear in the Selector drop-down box. Click OK. Select the Box category and enter 100 pixels for the height. Then select the background category and change the background color of the footer to our orange (#FFCCOO). Click Apply, then OK. Our layout is now complete.

dw-screen-layout-12

Ah, Houston, we have a problem.

Luckily, I have encountered this problem 137 times, and after the first 136, I finally figured out the problem.

Remember earlier when I mentioned clearing floats? Well, that is our problem. Our content floats (left & right) are removed from it’s container (#main). Therefore, #main thinks it has nothing to display, and everything after the floats simply get sucked up.

As mentioned earlier, there are two popular methods to clearing floats:

  • Use an element after the floats to clear the floats.
  • Self-clear the floats by floating the container of the two floats (#main).

With both solutions implemented, we now have the layout we expected.

dw-screen-layout-13

Bonus Information: Column Colors

As you dig in and start designing website with tableless CSS layout, you’re bound to run into another difference between using tables and using Divs/CSS for layout.

It is common to use a background color on a side column, to differentiate it from the primary content. Unlike tables, where the tabel cell would be as long as the longest cell in that row, Divs in CSS layouts have no way of knowing the length of other divs in its container (except when using JavaScript). So what we’re left with is a colored box that doesn’t extend down the length of the content area.

dw-screen-layout-14

So how can we create columns were the background color extends down the length of the page? The answer is by using a vertically tiling background image on the containing Div, the #main div.

We create a background the includes the color for the right side column.

dw-screen-layout-15

We then use the image as a background of the #main div, and tile it vertically.

dw-screen-layout-16

Well, that’s it. There’s many little refinements that we can make, like padding & gutters, but I gotta give you a reason to attend the meetup in March. See you then.

1 No such thing. Sorry print designers.
Advertisements

7 responses to “Tableless CSS Layout With Dreamweaver (Mentorship Series)

  1. Now I really feel bad knowing what great beginning I missed:(

    Very nicely explained.

    Thank you.

  2. …..

    My Header

    content
    supcontent

    Footer

    …..
    This is my html code. When I try some style to #main don’t work. For example:

    #wrapper #main {
    background-color:#0F0;
    }
    This code don’t work. Background color is white.
    This is my css:
    #wrapper {
    width: 960px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    text-align: left;
    background-color:#FFF;
    }
    body {
    text-align: center;
    background-color:#CCC;
    }
    #wrapper #main {
    background-color:#0F0;
    }
    #wrapper #header {
    background-color: #ffcc00;
    height: 100px;
    }
    #wrapper #main #content {
    float: left;
    width: 630px;
    }
    #wrapper #main #supcontent {
    float: right;
    width: 300px;
    }
    #wrapper #clearfix {
    clear:both;
    }

    #wrapper #footer {
    background-color: #FFCC00;
    height: 100px;
    }

  3. Dennis Deacon

    Dian, I believe the problem is in your #main style.

    Within the #main style, you have two floated elements (#content & #supcontent). When items are floated, they are taken out of the normal flow. With your issue, when you remove the contents of #main (#content & #supcontent), #main becomes technically empty. You would need to clear these floats to provide some context for #main to know where to extend to. I typically use a self-clearing method. By floating the containing element, you self-clear the entire block. So, if you were to float:left the #main element, your issue should be resolved.

    #wrapper #main {
    background-color:#0F0;
    float:left;
    width:100%;
    }

    Note that you must provide a width for floated elements.

    Lastly, I noticed that your left/right floats total to the total width of the containing wrapper (960px). I would suggest giving these two floats some breathing room, as IE in many cases will miscalculate these measurements and your right float will drop down. Consider the following:

    #wrapper #main #content {
    float: left;
    width: 625px;
    }
    #wrapper #main #supcontent {
    float: right;
    width: 300px;
    }

    Good luck!

  4. Such a nice article, i was reading through and i couldn’t stop till i finished, i just had a one hour practise after this and how i’m redesigning my website again using tableless CSS styles. Thanks for such a great knowlegde, i can imagine how many other things i’m missing out of this.

  5. Thanks Collins. You might also try http://www.css-tricks.com. They have screencasts (video) showing how to do these things and more.

  6. Hi Dennis Deacon,

    I have a query

    when i am creating a page using liquid – layouts I have four images with me like top, bottom, left & right. i have sliced from photoshop for the image in to small piece

    This is my css

    .body
    {
    padding:0px;
    margin:0px;
    background-color:#f4f4f4;
    }
    #wrap
    {
    margin: 0 auto;
    width: 100%;

    }

    #header
    {
    background-image:url(images/top.jpg);
    background-repeat:repeat-x
    }
    #leftcolumn
    {
    background-image:url(images/left.jpg);
    background-repeat:repeat-y;
    float:left;
    z-index:1;
    margin-top:0px;
    width:1%;
    }
    #footer
    {
    background-image:url(images/footer.jpg);
    background-repeat:repeat-x;
    clear:both;
    }
    #content
    {
    float:left;
    width:98%;
    }
    #rightcolumn
    {
    background-image:url(images/left.jpg);
    background-repeat:repeat-y;
    float:right;
    width:1%;
    }

    here top & bottom working fine but the left & right not working.

    Please tell me how to do this.

    I am eagerly waiting for your reply.

    HTML Code

    Design 2.0 – Index

     
     

    AC_FL_RunContent( ‘codebase’,’http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0′,’width’,’750′,’height’,’700′,’src’,’flash/intro’,’quality’,’high’,’pluginspage’,’http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash’,’movie’,’flash/intro’ ); //end AC code

     
     

  7. Can you send/submit the html, or better yet, send a URL where I can see everything?

    Note: one issue I saw. You have a z-index on an item that is not absolutely positioned. z-index only works on absolutely positioned elements.

    Look forward to seeing the code.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s