[Solved] Problems flowing text around images, positioning images

Hello!

I'm hoping someone can help with a frustrating problem. I'm trying to get the body text to flow around tables containing an image and a caption. (I decided to use tables in order to prevent the captions from pushing out the margins in cases where it's wider than the image. I also defined div classes depending on where on the page an image will live.)

However, I can't seem to get things to flow properly -- everything just stacks on top of each other. I had some success using SPAN instead of DIV and going without tables, but as soon as I put the tables back in, everything went to pieces.

Any and all suggestions are welcome! Here's the relevant code:

#container { margin-left: 1px; width: 700px; padding: 10px 10px 10px 10px; background-color:#3380CC; }

#content {
margin: 0;
padding:20px;
width: auto;
background-color:#FFFFFF;
overflow: hidden;
}

/* Imgages and captions */

.tl, .tr, .ml, .mr, .tban, .mban img {
border-width:thin;
border-style:solid;
border-color: #cccccc;
padding: 10px;
margin:0;
}

.tl, .tr, .ml, .mr, .tban, .mban table {
font-size:0.75em;
border:0;
width:1%;
padding: 0;
display:inline;
}

.tl {
float:left;
margin: 0 10px 10px 0;
}

.tr {
float:right;
margin: 0 10px 10px 0;
}

.ml {
float:left;
margin: 10px 10px 10px 0;
}

.mr {
float:left;
margin: 10px 0 10px 10px;
}

.tban {
margin: 0 0 0 10px;
}

.mban {
margin: 10px 0 0 10px;
}

This is a picture of Johann Wolfgang von Goethe. He's dead now, but he wrote some pretty good books.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lacinia, eros et molestie cursus, tellus magna tempus lorem, quis posuere mauris nisl ut turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

This is William Shakespeare. What a hack.

Duis libero velit, eleifend ut, porttitor eu, interdum sit amet, massa. Vestibulum ornare. Pellentesque at ligula. .