Welcome to WebmasterWorld Guest from

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)

10+ Year Member

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

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" />

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)

5+ Year Member

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)

WebmasterWorld Senior Member 10+ Year Member

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)

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
div#comment {
width: 400px;
background-color: #cfc;
border: 1px solid #000;
textarea {width: 196px;}
#comment * {margin: 10px 0;}
<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>

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.


<div id="comment" class="panel">
<form><!-- or any other element -->

.. your content..


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)

10+ Year Member


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.


Featured Threads

Hot Threads This Week

Hot Threads This Month