Thingamablog Blog

I Fixed the Formatting Problem

I fixed my formatting problem. The blog now works better when I shrink it down. The text from the left and the right no longer overlap when I make the browser skinny or show the blog with the RSS frame displayed. Don't try sqeezing it down with your browser now because it does not do that any more.

To fix it, I had to edit all the templates plus the style sheet. In the templates I put tables around the "content" part and the "index" part. Those two ID's in the style sheet make up the two main parts of the blog, the left side and the right side. By putting them into tables it is no longer possible to have the text overlap. I put the content part into a table like this:

  <div id="content">
  <div class="blog">
  <table align="left" width="65%" border="0">
  <tr><td>

Then after the <div> is closed, I close the table.

  </td></tr></table>

This table is set up to take up 65% of the width of the browser. That way the content will be arranged to fit in the available space.

For the "index" ID (the right hand side of the blog) I made a fixed width table, like this:

  <table align="right" width="280" border="0">
  <tr><td>
 
  <!-- sidebar begin -->
  <div id="links">

And I closed it when the </div> is closed, like this:

  		</td></tr></table>

The fixed size table for the right hand side of the blog keeps the browser from wrapping things like the calendar etc. because the table is sized large enough to avoid that effect.

In order to keep the visuals inside of the tables, I had to edit the style sheet, styles-site.css, to get rid of some absolute positions and margins. I commented out the positions like this:

  #content, #container {
  background-image: url(stripes.png);		
  background-repeat: repeat-x;
  background-position: bottom left;
  /* position: absolute;*/
  left: 0;
  }

And in the links ID.

  #links {
  /*position: absolute;*/
  right: 10px;
  width: 280px;
  text-align: right;
  }

Then I commented out the right margin of the #content.blog class

  #content .blog {
  margin-bottom: 100px;
  /*margin-right: 290px;*/
  }

That is it. It took a bit of investigation to figure out what to do, but the fix itself is not too difficult once you know the secret.