Css overlapping image/text problem

Hi

I am new at css and I am having a few problems!

I have a page which is spilt into three cols, a header taking up the length of the page, the main content and a right navigation column.

I am trying to get a gallery of small thumbnails together. Basically I have got it so that it displays an image with some text aligned to the right of the image. Then a bit further to the right another image and more text aligned to the right. I basically want to recreate this 2 images/2 bits of text per "row". It seems to work ok, but when you rezise the browser window the further most image seems to overlap the right navigation. In 800x600 in netscape the "right" image just doesnt display at all!!

Is there a better way to code this so the images/text neatly wrap if the browser window is resized?

Here is my css for the right col:

#rightcol {
position: absolute;
left: 85%;
top: 15%;
margin-top: 0;
padding-top: 0;
font-size: 0.8em;
}

css for the content col:

#content {
margin: 0 22% 0 0;
padding-left: 1.5%;
font-size: 0.8em;
}

Css for the images:-

.medpics img {
float: left;
margin-right: 0.5em;
border: 0.1em outset #ffffff;
}

.medpics {
float: left;
margin-top: 15px;
width: 350px;
}

HTml:-

<div class="medpics">
<img src="eg_med.gif" width="40" height="50" />
Lorem ipsum dolor sit amet<br />
adipiscing elit, sed diam nonummy
</div>

<div class="medpics">
<img src="eg_med.gif" width="40" height="50" />
Lorem ipsum dolor sit amet<br />
adipiscing elit, sed diam nonummy
</div>

<div class="medpics">
<img src="eg_med.gif" width="40" height="50" />
Lorem ipsum dolor sit amet, consectetuer<br />
adipiscing elit, sed diam nonummy
</div>

Can any one help? Thanks!!