Webmaster Forum / HTML, CSS, Scripts / CSS / October 2004

Both of these apply to using IE 6.0 or Netscape 7.x:

First question:

I am trying to set up a simple horizontal menu as a red strip across
the browser window.  Here is the relevant part of the css I'm using:

.menu {
    text-align: center;
    display: block;
    height: 1.5em;
    margin-bottom: 2em;
    background-color: #f00;
    }

.menuitem {
    background-color: inherit;
    color: #fff;
    padding-top: .75em;
    padding-bottom: .75em;
    width: 24.7%;
    float: left;
    font-size: 85%;
    font-weight: bold;
    vertical-align: 50%;
    }

And here is the relevant html:

<div class="menu">
<div class="menuitem">
<a href="item1.html">item1</a>
</div>
<div class="menuitem">
<a href="item2.html">item2</a>
</div>
<div class="menuitem">
<a href="item3.html">item3</a>
</div>
<div class="menuitem">
<a href="item4.html">item4</a>
</div>
</div>

This works as I'd like.  BUT... when I change the .menuitem width
percentages from 24.7 to 25, when I resize the browser window, there
are certain brief points where the item4 menu item wraps to the line
below before going up to the same line as everything else again.  99%
of the time, the menu looks fine (even if I shrink the browser window
to be really narrow, like 200 pixels wide).  Why though, with 25%
menuitem width, does the last item wrap at certain specific window
widths?

==============================================

Second question:

I would like to have some text centered within a blue-colored box that
is itself horizontally centered in the window.  And I'd like the box
to be no wider than the widest part of the text.

Using a single-cell table, this is easy to accomplish.  The table cell
is no wider than the widest point of the text, and centering the text
within the cell, and the table within the browser window, works great.

Using css, I can't come close.  Either the blue box goes all the way
across the screen, or isn't centered, or is too wide or too narrow.

I'm obviously missing something; this should be simple to do.  How?