Welcome to WebmasterWorld Guest from 54.163.25.166

Forum Moderators: not2easy

Message Too Old, No Replies

Centering a positioned div tag

Div centers but content doesn't

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

Full Member

10+ Year Member

joined:Sept 24, 2002
posts:214
votes: 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?

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

New User

5+ Year Member

joined:Jan 14, 2007
posts:10
votes: 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!

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2005
posts: 1526
votes: 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>
3:18 pm on Feb 16, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 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><!-- or any other element -->

.. 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]

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

Full Member

10+ Year Member

joined:Sept 24, 2002
posts:214
votes: 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.