7 Replies Latest reply on Sep 22, 2011 2:54 PM by MurraySummers

    Placing Images side by side

    DanSp00ner Level 1

      Hi Guys

       

      I want to place 2 images side by side in my div and would like to know the easiest way to do this. I did have a table before which did the job but something went wrong and my table could only be placed in the div as an Ap Div which I do not want as on certain browsers it would move around.

       

      Could anyone help please?

       

      Many thanks!

        • 1. Re: Placing Images side by side
          MurraySummers Level 8

          I did have a table before which did the job but something went wrong and my table could only be placed in the div as an Ap Div

           

          Huh? Do you mean you could only locate it where you wanted within that div if you made it absolutely positioned?  Or what?

           

          which I do not want as on certain browsers it would move around.

           

          Absolutely positioned elements do not move around.  If you are seeing things move, then it means that you are using positioning incorrectly.

           

          Let's start by seeing you page and its code.  Can you upload it and post a link, please?

           

          Anyhow, placing images horizontally adjacent is the default behavior for images.  Just insert them on the page and they will be horizontally adjacent, assuming that there is enough width available for them to fit side-by-side.

          • 2. Re: Placing Images side by side
            DanSp00ner Level 1

            Hi Murray

             

            Thanks for getting back to me

             

            The page in question is this : http://ds-innovations.com/EasySpace.html

             

            I wish to have the 4 images in a square shape (like a gallery) where 2 will be side by side and beneath that another 2 side by side.

             

            Sorry if I seem atall niave Im very new to Dreamweaver and have taught myself via youtube tutorials and made this site through a template!

             

            My Code is as follows:

             

            <div class="column3-unit-right">

                      <h1> Images</h1>

                      <p><img src="images/thmb20110826-145204 - Copy.JPG" alt="" width="90" height="90" /><img src="images/thumb20110828-162051 - Copy.JPG" alt="" width="90" height="90" /><img src="images/thumbS1051801.JPG" alt="" width="90" height="90" /><img src="images/thumbS1051804.JPG" alt="" width="90" height="90" /></p>

            </div>

            • 3. Re: Placing Images side by side
              MurraySummers Level 8

              How about changing this -

               

              <p><img src="images/thmb20110826

               

              to this -

               

              <p style="width:180px;"><img src="images/thmb20110826

               

              Does that work for you?

              • 4. Re: Placing Images side by side
                DanSp00ner Level 1

                Unfortunately not! It just stays the same.

                 

                the width of the div is already 300px but they just automatically stack.

                • 5. Re: Placing Images side by side
                  MurraySummers Level 8

                  I see - add this rule to your CSS -

                   

                  div.column3-unit-right p img { float:none !important; }

                   

                  and see if that helps.

                  • 6. Re: Placing Images side by side
                    DanSp00ner Level 1

                    Thanks for once again trying to help Murray

                     

                    the css each of those images has clear:both; applied to it. when I removed that and they went exactly where you want them!

                    • 7. Re: Placing Images side by side
                      MurraySummers Level 8

                      The rule that applies to those images is this -

                       

                      .main img {

                          clear:both;

                          float:left;

                          padding:5px;

                          border:1px solid #FFF;

                          margin-top: 10px;

                          margin-right: 10px;

                          margin-bottom: 10px;

                          margin-left: 0;

                      }

                       

                      It will apply to ANY image within the .main container, including those within .mail-navigation, so you may not want to make changes to it.

                       

                      My last fix should have also worked - did it?