CSS to layout images

[darren13]

Hi guys,

As you can see from this page - Shawn Randall | Artist Statement | www.sirandall.com I'm trying to get the images to be justified across the page.

I've tried working the css file (http://www.sirandall.com/Template.css) so that they display correctly, but I'm not having much luck, I can nearly get it but not quite!

Does anyone know of the right way to do this, or can you refer me to another article that details the required procedure?

Many Thanks,
Darren.

[james113]

What do you mean by justify? Are you wanting the text to line up causing the center photo to rise higher or what? I would use inline css to fix the problem, whatever it may be, as inlined coding will override any external css file commands that may be desired elsewhere in the HTML document.

[darren13]

Hi James,

Sorry, I'm a bit lost there -

What I'd like to do, is have however many images are placed horizontally formatted to 'justified' so that the left-most image appears with it's left side on the left margin of the container and the right-most image appears with it's right side on the right margin of the 'container'. The images in the middle should be spread evenly. Pretty much the same as justified text really, but with images.

The trouble I have is that the image on the right, is not pushing all the way to the right. I've tried floating the images and setting different attributes such as -

text-align: justify;
float: left;
float: justify;

- but with no luck. I'm seriously thinking I might just have to go back to tables on this one - I'm either missing something, or CSS can't justify images. Hopefully it's the first one, as I'd really like to do this with CSS.

Any help would be great guys!

Darren.

[james113]

I have found that the justify value can only be used with the text-align property. So looks like a table would serve you better. CSS does have it's limits. I wish there was a code that could do everything. Life would be so much easier.

[speed]

I'm not 100% certain I'm understanding what you want to create but anyway.

Create 3 <div>s 33% wide and all left floated. Then place your images within the divs.

On the left <div> add text-align: left, on the center text-align: center, and on the right text-align: right.

Alternatively, and this is what I think would be better, is to text-align: center on all the divs.

I've only used 3 images but if you have 10 images you'd use a width of 9.5% and so on.

Finally check the results in Firefox, IE6, IE7 etc.

[darren13]

Hey Speedy,

Thanks for the tip - I've tried that out and it gets somewhere close - it's a good workaround, obviously hoping for the day that CSS can actually handle justifying images.

I've had to use a table to get the link text to spread right across, as 'justify' doesn't seem to like justifying text unless there's more than one line of text, as far as I can make out.

Thanks for the info again,

Darren.