dcsimg
www.webdeveloper.com
Results 1 to 6 of 6

Thread: How do I place images side by side instead of on top of each other?

  1. #1
    Join Date
    Mar 2007
    Posts
    2

    How do I place images side by side instead of on top of each other?

    I'm trying to update my photo gallery on my website, and I know how to add a picture with a caption, but they all just end up on top of each other. I'd like to have a row of about 3-4 pictures, then start another row underneath. How do I do this??

    Thanks!

  2. #2
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    style="float:left"

  3. #3
    Join Date
    Mar 2007
    Posts
    2

    Thanks Stephen, one more thing!

    This is my code....Whereabouts should I enter what you told me to?


    <table class="image">
    <caption align="bottom" class="txt-content12">Tabby</caption>
    <td><img src="images/Tabby1.jpg" width=100 height=109 style="padding:2px 2px 2px 2px;background-color: #AC714E"; /></td>

  4. #4
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    First off, get rid of TABLE for holding IMAGES. TABLE = TABULAR (comparative data, etc. not images).

    Do this instead:

    <div style="width:410px; height:105px; border:1px solid red; padding:5px;">

    <img alt="this is image #1" src="#" style="width:100px; height:100px; border:1px solid blue; float:left;" />
    <img alt="this is image #2" src="#" style="width:100px; height:100px; border:1px solid blue; float:left;" />
    <img alt="this is image #3" src="#" style="width:100px; height:100px; border:1px solid blue; float:left;" />
    <img alt="this is image #4" src="#" style="width:100px; height:100px; border:1px solid blue; float:left;" />

    </div>
    and from this, you can 'style' in ways that TABLE layout cannot possibly compete with (adding padding to the img, background-color to the DIV which shows-thru around the edges of the images, etc.. MUCH more efficient than using cellpadding and cellspacing and such).
    Last edited by WebJoel; 03-09-2007 at 03:44 PM.

  5. #5
    Join Date
    Feb 2006
    Posts
    4
    Or if you would rather stick with tables, split your row into additional cells and place an image in each one

  6. #6
    Join Date
    Nov 2011
    Posts
    1
    <table class="image">
    <caption align="bottom" class="txt-content12">Tabby</caption>
    <td><img src="images/Tabby1.jpg" width=100 height=109 style="padding:2px 2px 2px 2px;background-color: #AC714E"; /></td>

    Try the above code...It will fit your needs

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles