put it in the middle, I'm begging you, CSS

I have 1 div that holds 3 divs.

These three divs are trying to drive me insane because they won't center align to the 1 div in which they are contained.

Can you help?  My sanity thanks you and so do I.
<!--The CSS-->
/*Callouts*/

#callouts {
	height:150px; 
	background-color:#CCC; 
	width:940px; 
	margin:0px 0px 25px 0px; 
	text-align:center;
}
#calloutA, #calloutB, #calloutC {
	margin:0px 25px;
	padding:0px 15px;
	float:left;
	height:inherit;
	text-align:left;
	background-color:#CF0;
	border-left-width: 2px;
	border-left-style: inset;
	border-left-color: #999;
}
#calloutC{	border-right-width: 2px;
	border-right-style: inset;
	border-right-color: #999;
}


<!--The HTML-->
    	<div id="callouts" >
        <div id="calloutA">Callout A</div>
        <div id="calloutB">Callout B</div>
        <div id="calloutC">Callout C</div>    
	</div>

Open in new window

eeimg1.png
ImWorkingOnItNowAsked:
Who is Participating?

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

x
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.

Dave BaldwinFixer of ProblemsCommented:
I don't think you can use 'float:left;' and get 'center' at the same time.  You can force them to center by specifying width, height, and position.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
/*Callouts*/

#callouts {
				position:relative;
        height:150px; 
        background-color:#CCC; 
        width:940px; 
        margin:0px 0px 25px 0px;
        text-align:center;
}
#calloutA, #calloutB, #calloutC {
        /* margin:0px 15px;
        padding:0px 15px;
        float:left; */
        height:150px;
				width:150px;
        text-align:left;
        background-color:#CF0;
        border-left-width: 2px;
        border-left-style: inset;
        border-left-color: #999;
}
#calloutC{      border-right-width: 2px;
        border-right-style: inset;
        border-right-color: #999;
}
#calloutA {
	position:absolute;
	top:0;
	left:205px;
	}
#calloutB {
	position:absolute;
	top:0;
	left:385px;
	}
#calloutC {
	position:absolute;
	top:0;
	left:565px;
	}
-->
</style>
</head>
<body>

<!--The HTML-->
        <div id="callouts" >
        <div id="calloutA">Callout A</div>
        <div id="calloutB">Callout B</div>
        <div id="calloutC">Callout C</div>
				</div>
</body>
</html>

Open in new window

0
mstrelanCommented:
Or you can use display: inline-block;

So the parent has text-align: center; and the 3 callouts have display: inline-block; and each have a fixed width;

inline-block works in all but IE8+ and all other browsers. For IE7 support you just make it display: inline and it pretends to be inline block, but you need to do that in a conditional stylesheet.
0
Lukasz ChmielewskiCommented:
Additionally you may want to use margin: 0 auto; for all the 3 divs
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

ImWorkingOnItNowAuthor Commented:
What is a conditional stylesheet?
If I'm going to makle this absolute positioning, why wouldn't I just structure this as a table?  Tables work with everything, no?

Thanks as always for your patience.
0
Dave BaldwinFixer of ProblemsCommented:
I would probably use tables myself.  Depends on what else is on the page.  One of my customers uses absolute positioning in Dreamweaver for everything.
0

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
ImWorkingOnItNowAuthor Commented:

Sometimes I get too close to the code to know if I'm employing best practices.  These are just 3 static little boxes!  There's nothing too insane about this page, other than the lunatic coding it.  :)
0
ImWorkingOnItNowAuthor Commented:
Moderator!  I tried to award these points to Dave Baldwin, not myself.  Oh no!
0
ImWorkingOnItNowAuthor Commented:
Thanks for your help and showing me the forrest for the trees!
0
Dave BaldwinFixer of ProblemsCommented:
Thanks.  Did I miss something?
0
ImWorkingOnItNowAuthor Commented:
No, I just screwed up.
0
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
CSS

From novice to tech pro — start learning today.