2 replies [Last post]
Fuzztrek
Offline
newbie
Last seen: 15 years 50 weeks ago
Timezone: GMT-7
Joined: 2003-12-09
Posts: 2
Points: 0

Hello All,

I've been trying to figure this out for about a week now, however nothing seems to be working (I'm testing in IE6 at the moment).

I have 5 images which I would like to have spaced-out evenly accross the bottom of the page. This is easy to do, however I would also like a 200px left margin and a 139px right margin, and I would like to have it all done with div's and CSS. To clarify what I would like, here is the equivalent table code:

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td width="200">&nbsp;</td>
    <td>
      <table border="0" cellspacing="0" cellpadding="0" width="100%">
        <tr>
          <td align="center">Image One</td>
          <td align="center">Image Two</td>
          <td align="center">Image Three</td>
           <td align="center">Image Four</td>
           <td align="center">Image Five</td>
         </tr>
       </table>
     </td>
     <td width="139">&nbsp;</td>
   </tr>
</table>

I havn't had any luck using percentages to accomplish this. The closest I've come to achieving this was using nested divs and floating the images, but even so some of the images were side by side, which is not what I want.

Someone suggested I inline the images, place them in a div and text-align: justify the div, but that didn't work either.

Any ideas are greatly appreciated!

Thanks Laughing out loud

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 6 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Fluid horizontal image alignment

Hi Fuzztrek,
You could use margins on floated images to get the effect your after as long as you know the image dimensions.

 
.holder{width:650px;} 
.holder img{float:left; width:100px; margin:0 0 0 20px;} 
 
<div class="holder"> 
<img /> 
<img /> 
<img /> 
<img /> 
<img /> 
<hr style="clear:both; margin:0; padding:0; visibility:hidden;" /> 
</div>
You will have to adjust the values and center the holder.

Hope that helps

Fuzztrek
Offline
newbie
Last seen: 15 years 50 weeks ago
Timezone: GMT-7
Joined: 2003-12-09
Posts: 2
Points: 0

Fluid horizontal image alignment

Tony wrote:
Hi Fuzztrek,
You could use margins on floated images to get the effect your after as long as you know the image dimensions.
 
.holder{width:650px;} 
.holder img{float:left; width:100px; margin:0 0 0 20px;} 
 
<div class="holder"> 
<img /> 
<img /> 
<img /> 
<img /> 
<img /> 
<hr style="clear:both; margin:0; padding:0; visibility:hidden;" /> 
</div>
You will have to adjust the values and center the holder.

Hope that helps

Thanks for replying!

I tried what you suggested, but I'm not sure I did it correctly. I tried floating all of the images to the left, giving them a margin like you said, and putting them in a div with a width equal to the total of the images widths put together + their margins. However, this results in them being centered in the document, with a 20px space in between each of them. This is closer to what I would like, but my actual goal was to get them to fill up the available width with even spaces between each image, so that no matter the width of the browser, there would be one image at the left and one image at the right, with the other three filling in the rest (the entire thing would have a left and right margin, which is why I couldn't use percentages). Maybe I did it wrong.. perhaps you could elaborate?

Thank you anyway! Smile

edit: here is my code:

<div style="width: 515px;">
  <img style="float: left; margin: 0 0 0 20px;" src="Images/botnav_home.gif" width="39" height="10" alt="Home" />
  <img style="float: left; margin: 0 0 0 20px;" src="Images/botnav_administration.gif" width="114" height="10" alt="Administration" />
  <img style="float: left; margin: 0 0 0 20px;" src="Images/botnav_contact.gif" width="62" height="10" alt="Contact" />
  <img style="float: left; margin: 0 0 0 20px;" src="Images/botnav_privacy_policy.gif" width="105" height="10" alt="Privacy Policy" />
  <img style="float: left; margin: 0 0 0 20px;" src="Images/botnav_copyright.gif" width="75" height="10" alt="Copyright" />
  <hr style="clear: both; margin: 0; padding: 0; visibility: hidden;" />
</div>

(I'm just using inline styles for now, when I get it working I'll put them all together into one sheet.)