...

View Full Version : Contents of a div not centering (text is, but other elements are not)



jaYKay
11-26-2009, 04: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. :mad: Any ideas?




<!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, 05:08 PM
make a div above this one... and use clear:both

might help

Excavator
11-26-2009, 05: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:

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

jaYKay
11-26-2009, 05:37 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:

.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. :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum