Centering a positioned div tag

Forum Moderators: not2easy

Message Too Old, No Replies

Centering a positioned div tag

Div centers but content doesn't

Red_Eye

12:27 pm on Feb 16, 2007 (gmt 0)

I am developing a web application. I have a popup div tag that displays a text box and a couple of buttons. I want the div tag to be centred on the page. To do this i have selected this method

div#comment
{
position:absolute;
margin-left:-200px;
left:50%;
top:30%;
width: 400px;
background-color: white;
}

<div id="comment" class="panel">
<h2>Add Comment</h2><br />
<asp:TextBox ID="txtBox1" runat="server" Rows="10" TextMode="MultiLine"></asp:TextBox><br />
<asp:Button ID="button1" runat="server" Text="Add" OnClick="btnAdd_Click" />
<asp:Button ID="button2"runat="server" Text="Cancel" OnClick="btnCancel_Click" />
</div>

which does centre the div tag. However not the text box it is left off to one side of the div tag. This only happens in IE7 it works fine in Firefox (no surprise). Any suggestions?

darrengeorge

1:47 pm on Feb 16, 2007 (gmt 0)

Try setting the stuff that wouldnt position properly to position:relative

This is a reasonably common problem with IE, in my experience.

Might work, might not eh!

cmarshall

2:08 pm on Feb 16, 2007 (gmt 0)

Here's what I do. This seems to work for everything.

<div id="invisible_wrapper" style="text-align:center;width:100%"><div id="visible_content" style="margin-left:auto;margin-right:auto"></div></div>

SuzyUK

3:18 pm on Feb 16, 2007 (gmt 0)

interesting.. here's a test I set up is this what you're meaning?

<!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>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Untitled</title>
<style type="text/css" media="screen">
div#comment {
position:absolute;
left:50%;
top:30%;
width: 400px;
background-color: #cfc;
margin-left:-200px;
border: 1px solid #000;
}
textarea {width: 196px;}
#comment * {margin: 10px 0;}
</style>
</head>
<body>
<div id="comment" class="panel">
<h2>Add Comment</h2>
<select><option>select box</option></select><br />
<textarea>text in textarea</textarea><br />
<input type="submit" value="submit" /><br />
<span>text in a span</span>
<p>text in a paragraph</p>
</div>
</body>
</html>

Only the textarea and input stick out left, (by 200px) - don't know why it's happening, but a quick and dirty fix wrap the form controls, or all of the content of #comment in another element - a wrapper div or even the <form> element itself if it's there.

e.g.

<div id="comment" class="panel">
<form>
.. your content..
</form>
</div>

added: just playing around and noticed that adding float: left to affected elements brings them back into line too..

[edited by: SuzyUK at 3:26 pm (utc) on Feb. 16, 2007]

Red_Eye

4:08 pm on Feb 16, 2007 (gmt 0)

SuzyUK,

Thanks for the help I simply put a span tag round the text box and buttons and now it works in both IE and firefox.

Thanks for your help.