Hello everyone....I've been working on the design for my forum on my website and while everything else has gone to plan...one thing hasn't. On my topic page, the DIV with class greybox and id navigationbox that displays the text Home, New Posts, Members, Stats, Rules, etc. just wont align to the center of my 800px wrapper. I realize that it is set to float to the left and this is because for some reason when I don't float it to the left or right, the DIV's border does not display right in any browser (Well, I know it doesn't work in FF or Chrome, and I think it didn't it IE..). When not floated the border doesn't surround the DIV and instead just stretches across the 800px wrapper. Can anyone help me figure out a way to fix this? (And preferably not a non-standard...I know I could use a table with three columns or add a div before it with width of 33.3%)
Thanks Everyone!

P.S. And while your at it..could you tell me how it looks? I'd love to hear some feedback before I actually start the server side of the forum.

Why is it XHTML, and why is it transitional?

Why do you have:

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

<div id="navigation">
    <div id="nav-container">
       ...
    </div>
</div>

<div id="navigation"> <div id="nav-container"> ... </div> </div>

You don't need both divs; the more complicated you make your mark-up, the harder it is to debug.

And within that (where I have put the ellipsis), you have:

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

<div id="userbox" class="greybox">
    <ul class="navlist">
      <li><a href="#"><span>Login</span></a></li>
      <li><a href="#"><span>Register</span></a></li>
    </ul>
</div>

<div id="userbox" class="greybox"> <ul class="navlist"> <li><a href="#"><span>Login</span></a></li> <li><a href="#"><span>Register</span></a></li> </ul> </div>

You don't need both <div> and <ul>; use <ul> by itself.

And the <span>s are unnecessary.

Why do you have an 800px wrapper? If my window is smaller than 800px, I can't see the whole thing and I have to scroll horizontally. If my window is larger, there are gutters on each side of the page.

Make it:

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

width: 90%; margin: 0 auto;

width: 90%; margin: 0 auto;

and it will work for everyone.

If you float it left, of course it is not going to be centred!

It's very hard to read; there is not enough conrast between text and background.

You center something by applying the style:
margin: 0 auto;

or applying text-align: center to its containing element and text-align: left to the element.

Its fine for him to use an XHTML Transitional doctype, its just the "modern" version of HTML.

Ok so I've fixed some of the problems with the nav lists and such, but there still are a few problems.

1. The ul list with id navigationbox is still not aligning to the center. I have checked several times and it is not floated to the left or right. I have also tried margin: 0 auto; and text-align: center;
2. The divs that contain the post content with class post do not fill the area given to them. They won't stretch to fill the whole space between the side of the wrapper and the edge of the user details.
3. Text Color/Contrast: cfajohnson suggested that the contrast of the white text on the gray background. I need some help deciding what color I should use for text. Here are my options (Or if you have a better idea please post it!! ):
   • The gray post boxes become a dark orange (#F60) with white text
   • The gray post boxes become a dark orange (#F60) with black text
   • The gray post boxes become a dark orange (#F60) with dark gray (#333) text
   • Make all post text black
   • Make all post text dark gray (#333)

Thanks for your help!!

Have you tried using something like margin-left:25%;?

As for your post boxes how about black text on a light grey background? -maybe have a border slightly lighter or darker than the background.

I just tried the margin-left: 25% and sadly it didn't work. Maybe it's because I have my list set to display: inline-table so that the navlist displays right...no wait I tried it without any other properties and it still won't align center...this is wierd!!! Also I like your idea for the text. I was planning on using a black or really dark gray (just for some variety) text color, but do you think all the post text needs to be black or just the text inside the light gray boxes?
Also if anyone can figure out why this av box won't align center, I'd be grateful!!!

Ok so I did fix the center align nav menu (It's still not perfect...640x480 people aren't going to like the look of it to much so if there is any other fix, please post!! ). Aside from that...any ideas on the post width problem not filling the whole given area?

What is the CSS for that object. Dimensions, margins etc...

I would prefer the Nav to be longer and the text bigger. It would be much better if the navigation fit on one line.

Here is my CSS for the navlist...

And the CSS looks like:

You could try reducing the margin and set width to 100%.

If you are after a bit more space before Home and after Search try putting.