• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 405
  • Last Modified:

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
0
ImWorkingOnItNow
Asked:
ImWorkingOnItNow
1 Solution
 
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now