Displaying images in rows in a form with checkboxes underneath

[POPDUM]

Hi,

I am trying to position images, 4 to a row in 3 rows. I have defined the following divs:

container {width:800px; height:450px;position:relative}
firstrow {width:600px; height:130px;position:relative;top:0px}
secondrow {width:600px; height:130px;position:relative;top:140px}
thridrow {width:600px; height:130px;position:relative;top:280px}

However, when I display the images, they are all displayed one after the other, with a gap between what were supposed to be rows.

Can anybody tell me what might be wrong? I tried display:inline as well as display:block, but with no success.

Any help will be greatly appreciated!

 

[Vragabond]

Why all this positioning? It is not needed at all. Simply float the images and you'll get the desired effect. If need be, you can add clears where you want the image to be in the next line.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[vacunita]

how about something simple like:

#container {width:800px; height:450px; border:1px solid red;}
.row{
width:100%;
height:130px;
}

.row img{
width:198px;
height:100px;
}

<div id="container">
<div class="row"><img src="image.jpg">...</div>
<div class="row"><img src="image.jpg">...</div>
<div class="row"><img src="image.jpg">...</div>
</div>

What is this doing?

Well it creates a container to hold your rows, it then has a single class for a row, instead of 3 different ID's with the exact same definition. except for the "top" position which isn't needed anyway. Also notice none of the divs have any position relative or absolute defined, not really necessary in this case.
Divs will stack on their own on top of each other, and images will, as long as they fit, just appear next to each other.

Which is why I gave the image a width small enough so that all 4 can fit in the space given. In your case 800px wide. so their width is just shy of 200px. If your images are wider than that you'll need to either make your container div wider, or make your row divs scrollable.





----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.