Aligning DIV block not correctly in Firefox

[codeexploiter]

I am facing some alignment problem that I've performed on some div blocks in Firefox (my version is 2.0.0.1).

My CSS code is as follows



div#topMain {width:776px;background-color: #804000; border: 2px solid #804000;}

div#topMainOne {width:776px;background-color: #804000; border: 2px solid #804000; height:18px;}

#logged{width: 340px; color: white; font-family: verdana; font-size: 11px; display: inline;margin-left: auto;}
#logged span {color: #F9E700; font-family: verdana; font-size: 11px;font-weight:bold;}

#insertComment {width: 235px; color: white; font-family: verdana; font-size: 11px;display: inline;font-weight:bold;margin-left: auto;}

#closeComment {width: 190px; color: white; font-family: verdana; font-size: 11px;font-weight:bold;display: inline;margin-left: auto;}
#closeComment a {color: white; font-family: verdana; font-size: 11px; font-weight:bold; text-decoration: none;}
#closeComment a:hover {color: #F9E700; font-family: verdana; font-size: 11px; font-weight:bold; text-decoration: underline;}


The HTML code I've used is as follows on which I've used the above mentioned CSS code.



<div id="topMain">
<div id="topMainOne">
<div id="logged" align="left">You are logged as <span>Jayaprakash Valappil</span></div>
<div id="insertComment" align="center"><em>...Insert your commments...</em></div>
<div id="closeComment" align="right">
| <a href="javascript: alert('Action yet to implement');"> Action</a>&nbsp; | <a href="javascript: alert('Help yet to implement');"> ?</a>&nbsp; | <a href="javascript: showHide(0);"><img src="images/closeAddComment.gif" width="15" border="0" align="absmiddle" alt=""></a>
</div>
</div>
</div>


I want to the div blocks with the alignment that I mentioned inside the <div>'s align attribute.

In IE (7) it displays correctly but in Firefox everything is left aligned.

Why it is so?

[4fit?]

Why not just add a text-align statement to your CSS for the respective id?

[Twey]

The align attribute is deprecated presentational HTML. Use text-align or margin instead, as appropriate.

[codeexploiter]

The align attribute is deprecated presentational HTML. Use text-align or margin instead, as appropriate.


I've used text-align property after my forums posting in my CSS but no use.

But in my case i've solved this issue with absolute positioning. I still wonder whether there is another option for aligning DIV blocks..

[jscheuer1]

You must define a width, then margin:0 auto; will center that width within its container:


<div id="container" style="width:300px;">
<img src="some.jpg" style="width:200px;height:100px;margin:0 auto;">
</div>

This works as well with divisions as with images.