homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Centering a positioned div tag
Div centers but content doesn't

10+ Year Member

Msg#: 3254351 posted 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

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?



5+ Year Member

Msg#: 3254351 posted 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!


WebmasterWorld Senior Member 10+ Year Member

Msg#: 3254351 posted 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>


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

Msg#: 3254351 posted 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"
<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]


10+ Year Member

Msg#: 3254351 posted 4:08 pm on Feb 16, 2007 (gmt 0)


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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved