Picture display problems when trying to have border around pic

Hi everyone,

What I am trying to do is add a border around pics when they are displayed

Pictures are uprights and landscape format with the landscape pic equaling the width of two uprights so the idea is to have 2 uprights followed by a landscape and so on and so forth

The pics are displaying but with the following problems

1. The frame (css = picFrame) is wrapping around all of the pics and not putting a frame around each individual pic

2. The frame appears to be taking on the size of css = rightpanel

Having tried moving the

<?php foreach ($biosRecord['image'] as $upload): ?>

to various places within the coding without sucess other than messing up a left panel that I have

So my questions are -

Is it possible to frame each pic individualy? and if yes what am I doing wrong

Also any thoughts as to why the frame seems to be taking on the size of its containing wrapper "rightpanel"

I have pasted the css and html below

Thanks - Mel


HTML Code:

<div class="rightpanel">

<div class="picFrame">

<?php foreach ($biosRecord['image'] as $upload): ?>

<img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="" />
<?php endforeach ?>

</div>

</div>


CSS: These panels are contained within a main wrapper


.leftPanel {
font: 12px Verdana, Arial, Helvetica, sans-serif;
width: 350px;
padding-top: 0px;
padding-left:10px;
padding-right: 10px;
border: 1px solid #F1F1F1;
height:auto;
}


.rightpanel {
width: 550px;
font: 12px Verdana, Arial, Helvetica, sans-serif;
color: #000000;
float: right;
}



.picFrame { padding: 3px; border: 1px solid #79C6E4;
margin-left: 10px; margin-bottom:10px;
}