SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    413
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    centering two photos side by side

    How do I get the following two photos to line up side by side, but centered on the page?

    I tried align left, right, etc...they will appear side by side okay on large 22 inch monitor, but the right photo is off the screen on smaller one.

    I know, another newbie question. Any help would be appreciated.

    <h1><center>Just couple of reasons we go to France every year......</center></h1>
    <center>

    <table class="image" align="center" >
    <tr>
    <td><img src="images/Sardines.jpg" height="325" width="500" border="4"alt="Sardines, Bordeaux">
    </td>
    </tr>
    <tr>
    <td class="caption"><center><b>Sardines in Bordeaux</b></center></td>
    </tr>
    </table>



    <table class="image" align="center" >
    <tr>
    <td><img src="images/Meat.jpg" height="325" width="500" border="4"alt="Mid-day in Paris">
    </td>
    </tr>
    <tr>
    <td class="caption"><center><b>Lunch in Paris</b></center></td>
    </tr>
    </table>
    </center>
    <center><h2><font color="#8A360F">************</h2></center>
    <font color="black">

  2. #2
    SitePoint Member
    Join Date
    Feb 2010
    Location
    Milan, OH
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How do I get the following two photos to line up side by side, but centered on the page?
    I am fairly new to Web development, but here's a try at using your table structure to display your images. I had to change the markup to remove the deprecated tags and attributes that your original code contained because I don't want to practice any bad habits. Here's what I came up with:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    body {
        text-align: center;
        margin: 0px;
        padding: 0px;
    }
    table {
        margin-right: auto;
        margin-left: auto;
    }
    .image {
        height: 325px;
        width: 500px;
        border: 4px solid #000;
    }
    .caption p {
        font-weight: bold;
        margin-top: 0px;
    }
    h2 {
        color: #8A360F;
    }
    </style>
    </head>
    
    <body>
    <h1>Just couple of reasons we go to France every year......</h1>
    <table>
      <tr>
        <td class="image"><img src="images/Sardines.jpg" alt="Sardines, Bordeaux"></td>
        <td class="image"><img src="images/Meat.jpg" alt="Mid-day in Paris"></td>
      </tr>
      <tr>
        <td class="caption"><p>Sardines in Bordeaux</p></td>
        <td class="caption"><p>Lunch in Paris</p></td>
      </tr>
    </table>
    <h2>************</h2>
    </body>
    </html>
    Hope this helps. I'm sure there will be other comments about using tables instead of divs and css positioning, but the table structure seems to be the simplest way of doing what you are trying to do.

  3. #3
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,578
    Mentioned
    62 Post(s)
    Tagged
    3 Thread(s)
    Try this:
    HTML Code:
      <div style='text-align:center;font-weight:bold'>
    		
        <h1>
          Just couple of reasons we go to France every year......
        </h1>
    		
        <table class="image" align="center" >
        <tr>
          <td>
            <img src="001.jpg" 
                   height="325" width="500" border="4"
                   alt="Sardines, Bordeaux"  
            />
          </td>
          <td>
            <img src="002.jpg" 
                   height="325" width="500" border="4"
                   alt="Mid-day in Paris"  
            />
          </td>
        </tr>
        <tr>
          <td class="caption">
            Sardines in Bordeaux
          </td>
          <td class="caption">
            Lunch in Paris
          </td>
        </tr>
        </table>
      </div>



    .
    Last edited by John_Betong; May 25, 2010 at 17:03. Reason: formatting

  4. #4
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    413
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks both...

    Tried your suggestions, but the right photo still runs off the screen. I do not have a right margin. Perhaps I am doing something wrong, and if so I apologize. I copied both suggestions, and when sampled I pretty much got the same results.

    I feel certain my answer is very simple....I just have to find it. Guess that's part of the fun and the learning experience. If anyone else has a suggestion let me know. You folks have taught me a lot.

  5. #5
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    759
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Barnum View Post
    Thanks both...

    Tried your suggestions, but the right photo still runs off the screen. I do not have a right margin. Perhaps I am doing something wrong, and if so I apologize. I copied both suggestions, and when sampled I pretty much got the same results.

    I feel certain my answer is very simple....I just have to find it. Guess that's part of the fun and the learning experience. If anyone else has a suggestion let me know. You folks have taught me a lot.
    Part of the reason that your pictures don't fit on the screen without a horizontal scroll bar on lower-resolution monitors probably has to do with their width.

    Based on the code in your original post, each of them are 500px wide.

    Any monitor with a resolution that has a width lower than 1032px will show a horizontal scrollbar when viewing two images of that size side-by-side. (That's not counting any horizontal paddings or margins you have applied within the page, which would also need to be accounted for) A large portion of the Internet browsing population does have a resolution with a width that's lower than that. For example, 1024x768 and 800x600.

    No matter what HTML/CSS techniques you implement, this issue will persist.

    My suggestion is to resize each of images to have a width no larger than 384px. (again, not counting and horizontal padding or margins) Alternatively, you could stack the images one above the other and leave them at the current size.

    No matter what you do, I should mention that there is absolutely no reason to be using a table to position these images to your liking. Tables are for tabular data and not for the positioning or layout of elements such as images.
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  6. #6
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,578
    Mentioned
    62 Post(s)
    Tagged
    3 Thread(s)
    Try this:
    HTML Code:
    <table class="image" align="center" >
      <tr>
        <td>
            <div style='float:left; width:48&#37;'>
                <img src="001.jpg"  style='border:solid 4px;width:98%' alt="Sardines, Bordeaux" />
                <br />
                Lunch in Paris
            </div>	
    				
            <div style='float:left; width:1%; height:100%;background:#f00'>
                &nbsp;
            </div>	
    				
            <div class='' style='float:left; width:48%'>	
               <img src="002.jpg" style='border:solid 4px;width:98%' alt="Mid-day in Paris" />
               <br />
               Mid-day in Paris
          </div>	
        </td>
      </tr>
    		
    </table>




    .

  7. #7
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    759
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by John_Betong View Post
    Try this:
    HTML Code:
    <table class="image" align="center" >
      <tr>
        <td>
            <div style='float:left; width:48&#37;'>
                <img src="001.jpg"  style='border:solid 4px;width:98%' alt="Sardines, Bordeaux" />
                <br />
                Lunch in Paris
            </div>	
    				
            <div style='float:left; width:1%; height:100%;background:#f00'>
                &nbsp;
            </div>	
    				
            <div class='' style='float:left; width:48%'>	
               <img src="002.jpg" style='border:solid 4px;width:98%' alt="Mid-day in Paris" />
               <br />
               Mid-day in Paris
          </div>	
        </td>
      </tr>
    		
    </table>




    .
    Why did you wrap that in a table?
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  8. #8
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,578
    Mentioned
    62 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Alex View Post
    Why did you wrap that in a table?
    I was in a rush, I started with the original table, tied myself in knots trying to get it to work but my knowledge of the intricaciies of tables is limited

    The origina problem was solved. I appeciate that it is simpler to not use tables but thought that there may be further code within the table.

    Anyway it works, is scalable although not proud of the bloated solution



    .

  9. #9
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    759
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by John_Betong View Post
    I was in a rush, I started with the original table, tied myself in knots trying to get it to work but my knowledge of the intricaciies of tables is limited

    The origina problem was solved. I appeciate that it is simpler to not use tables but thought that there may be further code within the table.

    Anyway it works, is scalable although not proud of the bloated solution



    .
    I understand. Sometimes "whatever works" is the solution.

    @Barnum: It should be noted that this can be achieved without the non-semantic use of a table. If you are interested just reply back and let me know and I'll get you a proper rewrite as soon as I get a chance.
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  10. #10
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would do it with divs and leave out the table all together.

    CSS
    Code:
    #container {width:100&#37;;}
    #left {float: left; width: 48%}
    #right {float:left; width: 48%;clear:both}
    Code:
    <div id="container">
      <div id="left">
       <img here>
      </div>
      <div id="left">
       <img here>
      </div>
    </div>
    Of course you'd have to add your other styles in as well.

    Tables at this point in development should only be used for tabular data or anything presented in a grid format

  11. #11
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,578
    Mentioned
    62 Post(s)
    Tagged
    3 Thread(s)

  12. #12
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that's what you wanted right?

    If so, take your styles out of inline and add them up top between your <style> tags.


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
  •