SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Whats the code for positioning my images side by side?

    Hello,

    I need some help with my new site on sugar. can someone please tell me how do I position my images next to each other so i wouldnt have to scroll down as much as i do now. THanks. any help appreciated.

  2. #2
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code CSS:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>images side by side</title>
    <style type="text/css">
    #container { /*Your main page */
    width: 600px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
     
    }
    #Box   {
    width: 300px;
    height: 300px;
    }
    img   {
    width: 200px;
    height: 200px;
    padding: 20px;  /*Lets give these guy's some padding*/
    padding-top: 20px;
     
    }
    </style>
    </head>
    <body>
            <div id="container">
     
                 <div id="box">
     
                    <img src="http://blakeanthony.net/Sitepointmembers/995000_46458615.jpg" alt="Binary">
                    <img src="http://blakeanthony.net/Sitepointmembers/995000_46458615.jpg" alt="Binary ">
     
    </div>
    </div>
    </body>
    </html>
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  3. #3
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    css
    .lefty {
    float:left;
    }
    padding borders and margins as required.

    html

    <img class="lefty" src=etc, etc>

    Now only the selected images given the class lefty will float left. Anything else given the class lefty will also float left, making this a generally useful class. Guess what class name I'd use to float right?

    It's a good idea to have a clearfix class applied to the first thing that you wish to come after and below the last image that is floated left.

    .clearfix { clear:both;} - there are more elaborate clearfix classes, but this does work.

  4. #4
    SitePoint Zealot busylinks1's Avatar
    Join Date
    Nov 2008
    Posts
    160
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    why not you chose a simple method of align=left attribute of img tag or arrange images in table...
    <table>
    <tr> <td>
    <img src="http://blakeanthony.net/Sitepointmembers/995000_46458615.jpg" alt="Binary">
    </td>
    <td> <img src="http://blakeanthony.net/Sitepointmembers/995000_46458615.jpg" alt="Binary "> </td>
    </tr>
    </table>

  5. #5
    SitePoint Member
    Join Date
    Jan 2009
    Location
    Scotland
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by busylinks1 View Post
    why not you chose a simple method of align=left attribute of img tag or arrange images in table...
    <table>
    <tr> <td>
    <img src="http://blakeanthony.net/Sitepointmembers/995000_46458615.jpg" alt="Binary">
    </td>
    <td> <img src="http://blakeanthony.net/Sitepointmembers/995000_46458615.jpg" alt="Binary "> </td>
    </tr>
    </table>
    Ditch the tables and go with float:left ..

    its quicker and easier to add to pages and also will load quicker because the table has more code.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    Canada
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by barry-M View Post
    Ditch the tables and go with float:left ..

    its quicker and easier to add to pages and also will load quicker because the table has more code.
    I agree. tables are becomming things of the past now that pretty much every effect needed can be created with css. Not to mention css floats are much easier to accomplish.

  7. #7
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use my code it places the images side by side with one another. Using CSS
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  8. #8
    SitePoint Member JonathanKF's Avatar
    Join Date
    Nov 2008
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BlakeAnthony View Post
    Use my code it places the images side by side with one another. Using CSS
    Yes, blake's code should display quite nicely, and the images should display side-by-side as long as there is a enough horizontal space (width) in the containing element (div?).

    as long as you don't put <br /> tags after images, or make them display:block etc etc they should always display inline anyway...

    also don't add
    Code CSS:
    img   {
    width: 200px;
    height: 200px;
     
    }
    to your CSS file unless you want all images exactly the same 200px x 200px size or you are willing to manually target and override each image later in the CSS file!

    I also can't see why you would use
    Code CSS:
    img   {
    padding: 20px;  /*Lets give these guy's some padding*/
    padding-top: 20px;
     
    }

    where "padding-top" would be reduntant...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •