Best way to layout multiple images on a page

Question

Hi , I am a complete newbie to Dreamweaver and CSS, but am getting there :)
I have a page with a <div>  #container that is 400 px wide, and is wish to install 4 images as a 2 x 2 matrix in this container.  What is the best way  to do this with CS4?  There are other times when I will want to do a 2.x 3 image matrix.
I would appreciate all help and suggestions
regards,
Jill

Answer 1

My method of choice to do what you want to do:
Assuming that you want 2 side-by-side images (400 / 2 = 200), make the width 200px;
Assuming that the 2 x 2 refers to square-format, height will also be 200px;
Therefore, on the 2 x 3, width will remain 200px; height will be 300px;
Create a div format "box" that is styled like:
.twobytwo, .twobythree {
     width: 200px;
     height: 200px;
     float: left;
.twobythree {
     height: 300px;
<div id="container">
     <div class="twobytwo"><img [image code here]></img></div>
     <div class="twobytwo"><img...etc....
</div>
Because most of the properties are the same, I used a group selector for most of the property/values and added a single selector (.twobythree) for the one property that changed for the .twobythree.
Beth