Adding a Sidebar Column

Website template modifications in HTML5 & 4.01

HTML5 Adding a Sidebar
Adding a sidebar in HTML5 and responsive templates is done using a div and css float code. In older HTML 4.01 pages you can use a new table cell if desired. In both cases this can be a tricky element to add. Optionally, Google AdSense ads can be placed in the sidebar area you create.

See Also…

HTML 5 Code Sample

Sidebar in HTML5 (or HTML 4.01)
The following code creates floated left and right div columns and will work in any webpage no matter how old the code, or what version of HTML it uses. It also is responsive for RWD sites.

Step #1: Add to your HTML page:
Be sure to copy all the code in the box below.

Step #2: Add to your css file:
Be sure to copy all the code in the box below. Add to the bottom of the global css file.

In the css code, edit the 70% and 30% to any percent widths to adjust the left and right columns. A gray border is included in the css so you can see the divs. Optionally make the border="0" when you're done.

If your website does not include a global css file, you can add the above css code to the <head> section of your webpage by viewing the source code of this page and copying and pasting that code so it has opening <style type="text/css"> and closing </style> tags.

The Results:
Using the above code the results on your webpage will appear like the following:

Left content. Add your main body of content to this side.
Right content. Add your images or sidebar text to this side.

Note: You can optionally adjust the css code for the min-height, % widths, font-size for the right column, padding, margins, and borders.

Note: The divs will stack on the webpage if the content is too wide.

HTML 4.01 Code Sample

Old Version HTML 4.01 sidebar
If possible, using the above HTML5 code is a better solution even in HTML 4.01 websites and templates.

This support page is for adding a right sidebar. We are using the "about.htm" from a 2009 version Garden model template as an example, however, this will work with any similar 2009 or earlier Allwebco template. Google AdSense ads can be placed in the sidebar area you create.

Responsive & Mobile Note: The modification outlined below will not work on responsive or mobile templates. We do offer this as a custom modification. Contact us for details.

Add a sidebar in HTML 4.01

Step #1
Locate the following code or similar "table end" code in your HTML page:


Step #2
For older HTML 4.01 templates: Copy the code in the box below and paste it just before the code indicated in step #1.

Step #3
Test your page in a web browser to be sure it is working properly.

Adjustments and spacing
You may need to make some adjustments to the table to have proper widths and spacing.
  • Adjust the width="90" in the code you added from step #2 for your sidebar width.
  • Find the start of the "CONTENT TABLE" and adjust the cellspacing or cellpadding to adjust the witespace between the text and the sidebar.
  • Find the start of the "CONTENT TABLE" and adjust "width" of the table if you need more room on the page. See Editing Table Widths for more details.
  • In some templates you may need to add an extra cell for more space between the text and the sidebar. Use the following 2 lines of code and add it just above the code you added in step #2.

    </td><td width="15">

  • Most templates include a "page-splits" class in your CSS file. Check the CSS file and if it does not include this you can add something like the following at the bottom of the CSS file to format the lines used in the code you added from step #2 on this page:

    .page-splits {
    	border: #999999 1px solid;
    	background-color: #FFFFFF;
    	color: #FFFFFF;
    	height: 5px;
    	width: 100%;

Related Topics:
Template File Types
HTML Editing Software