Adding a Sidebar Column
Website template modifications in HTML5 & 4.01
Sidebar in HTML5 (or HTML 4.01)
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.
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%
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.
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.
You can optionally adjust the css code for the min-height, % widths, font-size for the right column, padding, margins, and borders.
The divs will stack on the webpage if the content is too wide.
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.
Locate the following code or similar "table end" code in your HTML page:
<!-- END CONTENT TABLE -->
For older HTML 4.01 templates:
Copy the code in the box below and paste it just before the code indicated in step #1.
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.
Template File Types
HTML Editing Software