[CSS] How to center one div in a main div

[kvdd]

Hello,

I have a main div, with two divs in it:

- Main div
---- div title
---- div content

And now I want to center the content div and title div in the main div, and its really anoying because nothing that i've found on internet is going to work.

<div id="crm-main">

	<div id="crm-title">
		<h1> New costomer </h1>
	</div>
	
	<div id="crm-content">
	
		<table width="600px" border="1">
			<tr>
				<td>some data
				</td>
			</tr>
		</table>
	</div>
	
</div>';

The CSS I have (I have removed al the CSS I found that should center the divs):

#crm-main {
	padding: 10px;
}

#crm-title {
	border-bottom: 2px solid #595d66;
}

#crm-content {
	margin: 4px;
}

When I just do vertical-align: middle; it do work in IE but not in FF.

[siriyal]

<div id="crm-main">
	<div id="crm-title">
		<h1> New costomer </h1>
	</div>	
	<div id="crm-content">	
		<table width="600px" border="1">
			<tr>
				<td><div align="center">some data
				some data</div> </td>
			</tr>
		</table>
	</div>	
</div>

try with this code

[kvdd]

Thank you for your reply!

But I have to say, I dont want to center the content of a div down the crm-content div.

I want that the whole crm-content div itself is centered. Just in the middle of the crm-main div.

Thanks for your reply, but thats not the solution!

[lifeworks]

try giving the content div a width..., then setting margins on that div (assuming is narrower than the all containing wrapper div) as margin: 0 auto;

in IE, setting text-align: center in the outer wrapper div will align the divs contained within it...

[david_a_smith]

<style type="text/css">
	body {
		text-align: center;	
	}
        .mainDiv {
         margin: 0px auto; 
         width: 600px;   
         height: 150px; 
         background: #FF0000;
        }
        .insideDiv {
         margin: 0px auto; 
         width: 300px;   
         height: 85px; 
         background: #FFFF00;
        }
</style>

<div class="mainDiv">
     <div class="insideDiv">
            This div is in the middle of the parent div :)
     </div>
</div>

The CSS for the body is for IE only, as FireFox works without it :)
I'm not sure if this is following standards or not, but it's always worked for me.

Hope this helps,
David.

[Andrew Hucks]

I'm pretty sure you can just wrap it it i <center> .

So...

<div id="crm-main">
	<div id="crm-title">
		<h1> New costomer </h1>
	</div>	
	<div id="crm-content">	
		<center><table width="600px" border="1">
			<tr>
				<td><div align="center">some data
				some data</div></td>
			</tr>
		</table>
	</div>	</center> 
</div>

[MidiMagic]

Both the center tag and the align= parameter are deprecated. They will stop working sometime in the near future, when HTML 4 is no longer supported. They do not work at all in XHTML now. Please don't give obsolete solutions.

There are two things going on here:

1. For some strange reason, the W3C does not want us to center anything but text. I think they are thinking in terms of books and newspapers, as opposed to homepages and advertising. No easy way to center anything else was provided, other than styles involving automatic margins or a clear on both sides.

2. IE doesn't follow the rules. Even when you apply the correct styles, IE doesn't understand what you wanted. But adding a style to center text alignment also makes the others work.

Don't specify sizes in pixels except for images. Using pixels for the sizes of other objects keeps the page from being compatible with various screen resolutions.

Don't use tables to create non-tabular structures, unless nothing else can be made to work. The table is not deprecated, but the use listed in the post above is an abuse.

The solution in the post above also has tangled tags, and will not pass W3C validation.

[kvdd]

First you all thanks for the help, and showing methods to solve this problem.
Thanks to david_a_smith, I used a big part of his code, and it is working now.

Lastly, the most thanks goes to MidiMagic, I appriciate your nice theoretically explanition of CSS centering methods.

Solved guys!