To obtain the look of an image on the left side of our page with the text being to the left of it but not over it, I use a set of nested tables. Nested tables are nothing more than a table inside of a table.
Internet Explorer doesn't display web pages the same as other web compliant browsers such as Firefox or Opera sometimes.

So to make sure the page will show up right in the browser that a visitor is using I am using nested tables with the alignment to the right. that will give us the proper spacing so our image on the left isn't covered up by text.
I am going to use Nvu to accomplish this.

The first thing we need to do is open Nvu.

The first thing I want to do in Nvu is put my background image into the page. This way I can see exactly where the tables will be in relationship to my background image that has a design along the left side.

The image I am selecting for this is an image I got off of a free image download site.
I already have the image uploaded to my image host so all I need is the complete URL for the image.
The image I want is located at; http://www.4u2go2.com/ebay/background/floral01boquet.jpg

So now I want to make that my background image
At the top of the tool bar, directly under the blue bar, 5 over from the left, is Format. We select Format then next to the bottom of the pop up menu is Page Colors and Background select that and we get a new pop up menu with Page Colors and Background at the top.
Go down towards the bottom and we see a white box with the name above it Background Image. Now we want to paste the entire url of your Background Image into the box.. Select OK and you now have a background image in your page.

This give us the following code;

<body
 style="background-image: url(http://www.4u2go2.com/ebay/background/floral01boquet.jpg);">


You are free to download the image onto your computer then upload it to your own image host. Please do not link to the image on my web host, or anyone else's. That is called bandwidth stealing.


Next we go to the tool bar along the top directly under the blue bar. Go to Table then Insert then Table.
We now have a Insert Table Menu with 3 tabs.  For this we want to select the center tab, Precisely, then we want to set our table parameters. In the first box, Rows, I want 1 row so we set that value to 1.
On the second row, Columns I set that value to 1
Now for the Width I am setting the width for his table to 100 and the box to the right to % of window

Now for the border width. I personally prefer frames with out borders but it is harder to work in the frames if you can not see the border so I am setting the Border to 2.
Now I click on Advanced Edit, this brings up another menu Advanced Property Editor also with 3 tabs. We only need to concern our selves  with the HTML Attributes.
Almost to the bottom of the Advanced Property Editor  is two boxes. the left is the actual attribute and the right one is the value of the attribute.
Select the little down arrow on the Attribute and then we want to select Align and for the Value we want to select right.
Now I want to increase the padding, the distance that any thing is from the inside edges of our table to 50.
So select cellpadding in the attributes that are showing and change the 2 into a 50
Next is the cellspacing
Change CellSpacing to 50
Click Ok for the Advanced Property Editor
Click OK for the Insert Table menu

This gives us the following code;

<table
 style="margin-left: auto; margin-right: 0px; text-align: left; width: 100%;"
 border="2" cellpadding="50" cellspacing="50">
  <tbody>
    <tr>
      <td align="undefined" valign="undefined"></td>
    </tr>
  </tbody>
</table>


Now I need the table to that the actual description will go into nested inside the table I just made.
Place your mouse cursour, inside of the table we just made and once again we want to select Table then Insert, Table.
This once again brings up the Insert Table pop up menu.
Select Precisely, center tab, again.
Then we want to set the Rows to 1
Columns to 1
Width to 80 % of the cell  ( that is what worked out with this particular image. You may need to change the width to match your background image)
Set Border to 2
Now we go to Advanced Edit...
choose the Attribute button at the bottom again and
select  align and for its value we want to select right once more.
Now click on cellpadding up in the attributes and we are going to change the cell padding to 40
Next click on cellspacing and set that value to 40
Click OK
Now we are back to the Insert Table menu
This time we want to select the Cell tab
Now we have
Horiz.alignment we set to Left
Vert. alignment we set to Top
Text wrapping is set to Wrap
Here we can also change the cellspacing (distance between cells) and the cell padding (distance from the insed edge of the cell) if we need to but they should now show Cellspacing 2 and Cellpadding 40
Click OK
 Now the code for the tables is:

<table
 style="margin-left: auto; margin-right: 0px; text-align: left; width: 100%;"
 border="2" cellpadding="50" cellspacing="50">
  <tbody>
    <tr>
      <td align="undefined" valign="undefined">
      <table
 style="margin-left: auto; margin-right: 0px; text-align: left; width: 80%;"
 border="2" cellpadding="40" cellspacing="40">
        <tbody>
          <tr>
            <td align="left" valign="top"></td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>

Now would be a good time to save your work. I can't say it enough save your work often. This will save you a lot of extra work for nothing if something were to happen as you could easily loose everything if the computer were to lock up or cut off.

Now we have a saved page with a set of nested tables and a nice background image to the left.

We can start typing your description into the inside table now. That is why I put borders up so we can see what we are doing and where the tables are located.

Once you have your description you can insert your image or images into the description area also.

Now if you are like me and want the page to appear seamless and not show any borders there are two ways to accomplish this;
If you are working in Nvu the tables will show tiny little white boxes at certain points along the table border.
Put your mouse over one of the little white boxes
It should turn into an arrow pointing in both directions. Once it does that you can right click with your mouse and a new pop up menu appears. Select  Table Cell Properties. Now you get a new pop up menu called; Table Properties. There are 2 tabs for this menu. Select the one to the left named Table.
Delete the 2 for border and change it into a 0
Click Apply
Click OK
Do this again for the second table

You can also remove the border by going to the tool bar at the top again.
select View, (third one from the left just under the blue bar) and then select HTML
This lets you view the actual HTML source code for the page.
Look for the border="2" and change it into border="0"
do this again for the second table and now you have this code: including the tag for the background image;

<body
 style="background-image: url(http://www.4u2go2.com/ebay/background/floral01boquet.jpg);">
<table
 style="margin-left: auto; margin-right: 0px; text-align: left; width: 100%;"
 border="2" cellpadding="50" cellspacing="50">
  <tbody>
    <tr>
      <td align="undefined" valign="undefined">
      <table
 style="width: 80%; text-align: left; margin-left: auto; margin-right: 0px;"
 border="2" cellpadding="40" cellspacing="40">
        <tbody>
          <tr>
            <td style="vertical-align: top; text-align: left;"></td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
<br>
</body>

Once again Save Your Work

                                            Coleman

Click Here to return to the previous page.