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.


  Colscreen grab
<div style="margin: 0 auto; width: 100%; display: inline-block; background-color: #fff;">
            <div style="float: left; "><a href="" target="_blank"><img src="/gifs/premier_mockup.jpg" alt="Premier Pensions" title="Premier Pensions" border="0" /></a></div>
			<div style="float: left; "><a href="" target="_blank"><img src="/gifs/village_cuisine_2.jpg" alt="Village Cuisine"  title="Village Cuisine" border="0" /></a></div>
            <div style="float: right; width: 30%;"><a href="" target="_blank"><img src="/gifs/Culverhouse Banner_75a.jpg" alt="Culverhouse Accountants" title="Culverhouse Accountants" border="0" /></a></div>

Open in new window

Colin BrazierAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Steve BinkCommented:
You mean something like this?

<!DOCTYPE html>
	<style type="text/css">
	* { box-sizing: border-box; }
	body { margin:0 auto; padding:0; border:1px solid black; }
	div#container { max-width:1280px; }
	div#image-container { border:1px solid red; text-align:center; } 
	div#image-container img { max-width: 32%; }
	<div id="container">
		<div id="image-container">
			<a href="" target="_blank"><img src="/eetest/1.jpg" alt="Premier Pensions" title="Premier Pensions" border="0" /></a>
			<a href="" target="_blank"><img src="/eetest/2.jpg" alt="Village Cuisine"  title="Village Cuisine" border="0" /></a>
			<a href="" target="_blank"><img src="/eetest/3.jpg" alt="Culverhouse Accountants" title="Culverhouse Accountants" border="0" /></a>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Colin BrazierAuthor Commented:
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 is because of the max width 32%?

box-sizing is also new to me, so I'm reading up on that as well.
2nd screen grab
Steve BinkCommented:
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 BrazierAuthor Commented:
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.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.