Forum Moderators: not2easy
I'm having a problem with aligning a certain inline div in the middle of the page. I have recently started converting my web site from a table based to a css based layout and have hit a little snag.
Aligning the left and right elements was easy, but the center one is proving a bit tricky.
HTML:
<div class="navoutline" id="navigationBar">
<div class="topnav" style="text-align: left; display: inline;"> LEFT TEXT</div>
<div class="topnav" style="text-align: center; display: inline; width: 50%; position: relative; left: 25%; right: 25%">CENTER TEXT</div>
<div class="topnav" style="text-align: right; width: auto; display: inline; position: absolute; right: 0px">RIGHT TEXT </div>
</div>CSS:
.navoutline {
background:#D5DEDE url(images/cellpic_nav.gif) repeat-x;
border:0 solid #6A7D6A;
border-width:1px 0px 0px 0px;
height:21px;
}.topnav {
color:#396742;
font-size:9pt;
white-sppace:nowrap
}While this looks okay at most resolutions in Firefox, if you try reducing the size of the window some funny stuff happens. Also, it doesn't seem to work right in IE and Opera.
Any tips would be appreciated.
[edited by: DrDoc at 10:07 pm (utc) on Feb. 14, 2006]
[edit reason] No URLs, thanks. See TOS [WebmasterWorld.com] [/edit]
How about changing the relative positioning for your centered element to absolute. Also, take out the
right
