Contents of a div not centering (text is, but other elements are not)

jaYKay · 11-26-2009, 03:58 PM

Hi,

The div GreyMessageBox should be centred and the contents of it should be centred too, but they are not, even though their parents are set to text-align:center; The only bit that is centred is the mobile number and name, everything else is off to the left.

Any ideas?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1"><title> 
Contact Me 
</title><link href="CSS/MainStyles.css" rel="stylesheet" type="text/css" /> 


<style type="text/css"> 

.GreyMessageBox 
{ 
border: 1px #C0C0C0 solid; 
position:relative; 
width:735px; 
overflow:hidden; 
text-align:center; 
} 


.TextBoxes 
{ 
font-family:Verdana; 
font-Size:Medium; 
width:210px; 
} 
.LargeTextBox 
{ 
font-family:Verdana; 
font-Size:Medium; 
width:470px; 
height:141px; 
} 

.ColLeftSize 
{ 
width:510px; 
} 
.ColRightSize 
{ 
width:223px; 
} 

</style> 

</head> 

<body> 

<form name="Form1" method="post" action="ContactMe.aspx" id="Form1" class="content"> 


<div class="LeftGeckoDiv"> 
<img id="imgGeckoLeft" src="Images/GeckoSmallLeft.png" style="border-width:0px;" /> 
</div> 
<div class="RightGeckoDiv"> 
<img id="imgGeckoRight" src="Images/GeckoSmallRight.png" style="border-width:0px;" /> 
</div> 

<div class ="titleDiv"> 

Contact Me 

</div> 


<div class="mainDiv"> 

<br /> 
Mr Jamie Keck 
<br /> 

Mobile:&nbsp;012345678910 
<br /> 
<br /> 


<div class="GreyMessageBox"> 

Send me a message now 

<br /> 
<br /> 
<table > 
<tr> 
<td class="TdRight">Your Email:</td> 
<td><input name="UsersEmail" type="text" id="UsersEmail" class="TextBoxes" /></td> 
</tr> 
<tr> 
<td class="TdRight">Subject:</td> 
<td><input name="Subject" type="text" id="Subject" class="TextBoxes" /></td> 
</tr> 

</table> 
<br /> 

<div class = "ColDivLeft ColLeftSize"> 

<table> 

<tr> 
<td> 
Message<br /> 
<textarea name="Body" rows="2" cols="20" id="Body" class="LargeTextBox"></textarea> 
</td> 
</tr> 
<tr> 
<td class="TdCenter"> 
<input type="submit" name="SendEmail" value="Send Message" id="SendEmail" class="standardbutton" /> 
</td> 

</tr> 

<tr> 
<td> 



</td> 
</tr> 


</table> 

</div> 


<div class = "ColRightSize ColDivRight"> 

<br /> 

<img id="Image1" src="Images/Mail.png" style="border-width:0px;" /> 


</div> 


</div> 

<br /> 
<br /> 
</div> 

<div class ="footerButtons"> 

<input type="image" name="imgbtnHome" id="imgbtnHome" src="Images/HomeButton.png" style="border-width:0px;" /> 
</div> 


<div class="footer"> 
<hr /> 
© 2009 Red Gecko UK. All rights reserved. 
</div> 

</form> 
</body> 
</html> 


Style sheet -> 


body 
{ 
background-image: url('../Images/background.png'); 
background-color: White; 
background-repeat:repeat-x; 

} 

.content 
{ 
background-color: White; 
margin: auto auto auto; 
margin-top: 2px; 
width: 992px; 
position: relative; 
} 

.titleDiv 
{ 

border-top: 1px #FF0000 solid; 
text-align: center; 
position: relative; 
font-family: Arial Black; 
font-size: 30pt; 
color: Red; 
width:746px; 
height:67px; 

} 

.LeftGeckoDiv 
{ 
float:left; 
border-top: 1px #FF0000 solid; 
border-Left: 1px #FF0000 solid; 
position: relative; 
width:122px; 
height:68px; 
} 

.RightGeckoDiv 
{ 
float:right; 
border-top: 1px #FF0000 solid; 
border-Right: 1px #FF0000 solid; 
position: relative; 
width:122px; 
height:68px; 

} 

.mainDiv 
{ 
text-align:center; 
position: relative; 
border-color: Red; 
border-style: solid; 
border-width: 1px; 
font-family: Verdana; 
font-size: medium; 
color: Black; 
z-Index: 0; 
width:990px; 

} 

.footerButtons 
{ 
text-align:center; 
position:relative; 
margin-top: -30px; 
z-Index:1; 

} 

.footer 
{ 
text-align:center; 
font-family: Verdana; 
font-size: x-small; 
color: #C0C0C0; 


} 

.ColDivLeft 
{ 
position:relative; 
float: left; 
} 

.ColDivRight 
{ 
text-align:left; 
float:right; 
position:relative; 
} 

.standardbutton 

{ 
background-color:#F2F2F2; 
border-Color:#CCCCCC; 
border-Style:Solid; 
border-Width:1px; 
font-family:Verdana; 
Font-Size:Medium; 
Height:30px; 
} 

.TdRight 
{ 
text-align: right; 
} 

.TdCenter 
{ 
text-align: center; 
} 

.TdCenterRed 
{ 
text-align: center; 
color:Red; 
}

ErwinEHVNL · 11-26-2009, 04:08 PM

make a div above this one... and use clear:both

might help

Excavator · 11-26-2009, 04:28 PM

Hello jayKay,
To center an element we need 3 things:

a DocType
a width on the element
that elements right and left margins set to auto

Make your CSS look like this:

Code:

.GreyMessageBox { 
	border: 1px #C0C0C0 solid; 
	position: relative; 
	width: 735px; 
	margin: 0 auto;
	overflow: hidden; 
	text-align: center; 
	background: #f00;
}

jaYKay · 11-26-2009, 04:37 PM

Quote:

Originally Posted by Excavator

Hello jayKay,
To center an element we need 3 things:

a DocType
a width on the element
that elements right and left margins set to auto

Make your CSS look like this:

Code:

.GreyMessageBox { 
	border: 1px #C0C0C0 solid; 
	position: relative; 
	width: 735px; 
	margin: 0 auto;
	overflow: hidden; 
	text-align: center; 
	background: #f00;
}

I knew it would be something simple. Thanks very much, I've been going round in circles with this for ages.