1 Reply Latest reply on May 22, 2010 6:14 AM by Zabeth69

    Best way to layout multiple images on a page

    JillB4814

      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

        • 1. Re: Best way to layout multiple images on a page
          Zabeth69 Level 5

          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