Offset Horizontal Spacing with Percentages

Using percentages relative to the parent element

[Fuzztrek]

Hello All,

I've been trying to figure this out all day, however so far I havn't been able to get exactly what I want. I'm currently only testing in IE 6, just to let you know.

Anyway, I think this is a pretty common "problem", but I guess I havn't been able to label it as something that would yield search results. Basically, I want to space out 6 images evenly and fluidly (which is easy), but at a left offset of 200 px. So basically, on the left I have a 200 px space, which is off-limits. I want to evenly space 6 images in the rest of that space, so 100% - 200 px, if that makes sense :P

By horizontal spacing, I mean that I would like an equal space between each of the images, and I would like the first image and the last image to be touching the borders of this space, with each image inbetween positioned appropriately so that regardless of the browser width, the images look even.

However, as you have probably guessed, in IE 6 (maybe others, I'm not sure) the width is taken from the body, not the parent object. So, if I put each of my images into a div, and make the div's width 20%, and put all of these divs inside another div with a left-margin of 200px (or positioned 200px left), the images are evenly spaced starting at 200px, but they continue past the width of the browser. This is very ugly and not at all what I want.

The effect I would like to achieve is very easily created with tables, so there *must* be a way for this to be done with CSS. Sorry if this post is long-winded, I wasn't really sure how to word it. If more information is needed I can definitely provide it! I thought that code was rather irrelevant, but if needed I can post it.

Any ides?

- Fuzztrek

[birdbrain]

Hi there Fuzztrek,

Welcome to these forums.
I have not, as yet, tried to position six images as you describe.
The reason being is that your percentages would take the images past the browser width.

Try 16.66% and see what results.

birdbrain

[killroy]

Why not just float the images and give them margin:auto?

Or try to inline the images (so each one is like a glyph) and then justify them.

Don't think percentages are the only solution to this.

SN

[Fuzztrek]

Thanks for replying!

birdbrain: I made a mistake in my original post.. I meant to say 5 images, not 6. Thanks anyway!

killroy: I hadn't thought of inlining the images and justifying them. I tried floating them before, but to no avail. Today I've been experimenting with both of your suggested methods, and havn't been able to get it to work yet (the images stay together, they don't spread out - with both methods), but I'm going to continue fiddling around until I get this.

Thanks again!

[Fuzztrek]

I realized that I could better explain my situation (not that the the previous repliers sounded confused, but perhaps I can further explain what I want to do) by providing the equivalent table HTML:

<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 Twotd>
 <td align="center">Image Three</td>
 <td align="center">Image Four</td>
 <td align="center">Image Five</td>
 </tr>
 </table>
 </td>
 </tr>
</table>

killroy: I tried using float and margin: auto, however I may have done it incorrectly.

I placed each image into one div, and set that div's margin-left to 200 px. I then floated each of the images to the left, setting their margin to auto. This resulted in them being placed 200px to the right, but they were each side by side, with no spaces inbetween and plenty of room to their right.

I also tried changing the div's style to text-align: justify, and changing the images to display inline, but that did not work either.

I don't want you to tell me exactly what to do, but perhaps you could elaborate a little more. I'm sure I'm just looking in the wrong spot, my mind is focused on percentages and I am trying to break out of that line of thinking. I havn't been web programming for a year or so and there is a ton of cool new stuff for me to learn :) (that's my sorry excuse).

Thanks for your time!

[Fuzztrek]

Heh.. hate to bump, but I stil havn't figured out how to do this yet. Perhaps it isn't possible.. anyway, if no one can answer I'll just use fixed spaces :)

[pageoneresults]

Hmmm, maybe set up a special image.class and assign padding-left?

img.p20 {
padding-left:20px;
}

<img class="p20" src=""...>

You would only assign that class to images 2 thru 5 unless of course you wanted 20px padding-left on image 1.

[Fuzztrek]

Thanks for replying!

Yes, that would work if I wanted a 20px space in between each image, but what I was actually going for was to evenly space each image out.. that would be 20%, however since I need all of the images to start 200 px from the left, I can't use percentages. Thanks anyway!