asked on

Individually centre 3 jpgs using CSS

Hi experts,

I need 3 equally sized jpgs in a horizontal row on my web page, individually centred, occupying the entire length of the row.

How would I manage this please?

The row length is governed by the enclosing div which is set at 980 pixels. The screen grab is one of my failed attaempts, I have attached the relevant code.

Thanks,

Col

<div style="margin: 0 auto; width: 100%; display: inline-block; background-color: #fff;">
            <div style="float: left; "><a href="http://www.premierpensions.co.uk" target="_blank"><img src="/gifs/premier_mockup.jpg" alt="Premier Pensions" title="Premier Pensions" border="0" /></a></div>
            &nbsp;&nbsp;
			<div style="float: left; "><a href="http://www.villagecuisine.com/" target="_blank"><img src="/gifs/village_cuisine_2.jpg" alt="Village Cuisine"  title="Village Cuisine" border="0" /></a></div>
            &nbsp;&nbsp;
            <div style="float: right; width: 30%;"><a href="http://www.culverhouse-accountants.co.uk/" target="_blank"><img src="/gifs/Culverhouse Banner_75a.jpg" alt="Culverhouse Accountants" title="Culverhouse Accountants" border="0" /></a></div>
		</div>

Open in new window

ASKER CERTIFIED SOLUTION

Steve Bink

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Colin Brazier

ASKER

Ah yes, thanks. I have added margin:0 auto; to the container to centre it on the page. There seems to be some padding underneath though, which I can't get rid of...it is because of the max width 32%?

box-sizing is also new to me, so I'm reading up on that as well.

Steve Bink

It may be that:

your images have a margin built in

a container element is implementing a margin or padding

you have an empty element as a sibling to the images' container

the images' container element has been given an explicit height

The max-width strategy allows the browser to determine the content height based on auto-scaling of the images.

Also, to be clear, the box-sizing property is not strictly necessary... I just find it useful when I'm sizing things to be exact. At the same time, I did not generate an exact sizing - the 32% max-width setting will leave a little whitespace. Any additional spacing should balance between the far right and left sides.

Colin Brazier

ASKER

OK thanks again, none of those options apply (I should have posted my code) so it must be the 32%.

Seems I was over-complicating with floats etc.