Cannot align a DIV

[FlashCreations]

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.

[cfajohnson]

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,

Why is it XHTML, and why is it transitional?

the DIV with class greybox and id navigationbox

Why do you have:

<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:

<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.

that displays the text Home, New Posts, Members, Stats, Rules, etc. just wont align to the center of my 800px wrapper.

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:

width: 90%; margin: 0 auto;

and it will work for everyone.

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..).

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

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.

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

[JugglerDrummer]

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.

[FlashCreations]

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!!

[Xlphos]

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.

[FlashCreations]

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!!! :D

[FlashCreations]

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?

[Xlphos]

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.

[FlashCreations]

Here is my CSS for the navlist...

<ul class="greybox navlist" id="navigationbox">
            <li><a href="#"><span>Home</span></a></li>
            <li><a href="#"><span>New Posts</span></a></li>
            <li><a href="#"><span>Members</span></a></li>
            <li><a href="#"><span>Stats</span></a></li>
            <li><a href="#"><span>Rules</span></a></li>
            <li><a href="#"><span>FAQ</span></a></li>
	    <li><a href="#"><span>Search</span></a></li>           
</ul>

And the CSS looks like:

#navigation #navigationbox { margin: 0 33% 7px; } /* Note that the id navigation belongs to a div that this navlist is in */
/* 33% margin is experimental.....and breaks down with screen size 640x480 */

.greybox { background: #CCCCCC; border-bottom: 1px solid #999999; border-right: 1px solid #999999; color: #FFFFFF; margin-bottom: 5px; }

ul.navlist { display: inline-table; height: 20px; margin-left: 25%; width: auto; }
ul.navlist li { display: inline-table; height: 20px; list-style: none; margin: 0; padding: 0; }
ul.navlist li a, ul.navlist li a:visited { background: #CCC; color: #FFF !important; height: 20px; padding: 0px 7px 5px 7px; text-decoration: none !important; }
ul.navlist a:hover { background: #999999 !important; color: #FFF !important; text-decoration: none !important; }
ul.navlist li a span { vertical-align: middle; }
/* Note: The !important's are due to another part of the CSS document that define the color and background properties to be different (For another part of the site) */

[Xlphos]

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.

<li>&nbsp</li>
// Your links
<li>%nbsp</li>

[FlashCreations]

That seems like a great idea, being that it just doesn't want to properly align to the center. And I have tried it and it worked quite well. People with small screen resolutions will have a double height bar, but oh well. There just doesn't seem to be away to get the li's to adjust their widths to fit a one line nav bar. I won't worry too much about that because DaniWeb has some bugs too. There is still one issue I need to deal with and that is the div boxes with class post not stretching to fill the available area. On larger screen resolutions the posts are very small and there is lots of white space between the post and the user details. Here is my code:

<div class="full-post">
	<div class="post-details pst-left">
		<a href="#"><strong>phpmycoder</strong></a>
		<img alt="phpmycoder's avatar" src="http://assets.phpmycoder.net/images/logo.jpg"/>
		<ul>
			<li><strong>Site Admin</strong></li>
			<li>Posts: <strong>947</strong></li>
			<li>Reputation: <strong>20</strong></li>
		</ul>
	</div>
	<div class="orangebox post pst-right">
		<h3>Test Post</h3>
		<small>Posted on May 16, 2009 12:00 PM</small>
		Test Post
		<div class="divider"/>
                Test Signature
	</div>
</div>

And the CSS:

.orangebox { background: #FF9900; border-bottom: 1px solid #FF6600; border-left: 1px solid #FFCC00; border-right: 1px solid #FF6600; border-top: 1px solid #FFCC00; color: #FFFFFF; margin-bottom: 5px; }
.orangebox a, .orangebox a:visited { color: #CCC; text-decoration: underline; }
.orangebox a:hover { color: #999; text-decoration: underline }

.full-post { float: left; margin-bottom: 7px; width: 100%; }
.post { min-height: 145px; padding: 3px 3px 3px 3px; width: 670px; }
.pst-right { float: right; }
.pst-left { float: left; }
.post h3 { color: #FFFFFF; margin: 0; padding: 0; }
.post small { font-size: small; }
.post .divider { background: #FFFFFF; height: 1px; margin-bottom: 3px; }
.post-details { color: #CCCCCC; text-align: center; width: 110px; }
.post-details strong, .post-details ul li strong { color: #999999; font-weight: bold; }
.post-details a { text-decoration: none; }
.post-details img { border: 1px solid #CCCCCC; height: 80px; margin: 3px 0px; width: 80px; }
.post-details ul, .post-details li { list-style: none; }
.post-details ul { margin: 0; padding: 0; }

[JugglerDrummer]

I wouldn't worry about 640 monitors. Those are extremely rare, especially for professionals your site is targeting. I would suggest making the text black, :)

[FlashCreations]

You bring up a good point JugglerDrummer. I guess as long as my site works for 1024x768 and up I'm good. But, I still can't figure out why my post boxes won't fill the whole area given to them though! Any ideas?

[Xlphos]

You bring up a good point JugglerDrummer. I guess as long as my site works for 1024x768 and up I'm good. But, I still can't figure out why my post boxes won't fill the whole area given to them though! Any ideas?

Can you post how you want your screen to appear at different resolutions? I know that as you shrink the screen the boxes come closer together.

Post us a pic of what you want it like (do a screenshot of your site).

[cfajohnson]

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

MSIE doesn't understand XHTML if it is served properly; if it is served as text/html (so that IE will display it) you lose whatever benefit there might be to XHTML.

[FlashCreations]

Here is a before and after preview of what I am trying to accomplish....(screen-shots attached)

[Xlphos]

<div class="full-post">
	<div class="post-details pst-left">
		<a href="#"><strong>phpmycoder</strong></a>
		<img alt="phpmycoder's avatar" src="http://assets.phpmycoder.net/images/logo.jpg"/>
		<ul>
			<li><strong>Site Admin</strong></li>
			<li>Posts: <strong>947</strong></li>
			<li>Reputation: <strong>20</strong></li>
		</ul>
	</div>
	<div class="orangebox post pst-right">
		<h3>Test Post</h3>
		<small>Posted on May 16, 2009 12:00 PM</small>
		Test Post
		<div class="divider"/>
                Test Signature
	</div>
</div>

And the CSS:

.orangebox { background: #FF9900; border-bottom: 1px solid #FF6600; border-left: 1px solid #FFCC00; border-right: 1px solid #FF6600; border-top: 1px solid #FFCC00; color: #FFFFFF; margin-bottom: 5px; }
.orangebox a, .orangebox a:visited { color: #CCC; text-decoration: underline; }
.orangebox a:hover { color: #999; text-decoration: underline }

.full-post { float: left; margin-bottom: 7px; width: 100%; }
.post { min-height: 145px; padding: 3px 3px 3px 3px; width: 670px; }
.pst-right { float: right; }
.pst-left { float: left; }
.post h3 { color: #FFFFFF; margin: 0; padding: 0; }
.post small { font-size: small; }
.post .divider { background: #FFFFFF; height: 1px; margin-bottom: 3px; }
.post-details { color: #CCCCCC; text-align: center; width: 110px; }
.post-details strong, .post-details ul li strong { color: #999999; font-weight: bold; }
.post-details a { text-decoration: none; }
.post-details img { border: 1px solid #CCCCCC; height: 80px; margin: 3px 0px; width: 80px; }
.post-details ul, .post-details li { list-style: none; }
.post-details ul { margin: 0; padding: 0; }

Can you try changing the post width to a percentage instead of a pixel width?

[FlashCreations]

I could try, but here's the problem. The user details that appear beside the post have a set width. I can't use a percentage because of this. I need the post to fill up just the area it is given. I have partially fixed the problem by not aligning the posts to the left/right and removing the width, but for some reason there still is an issue with overlap.

[FlashCreations]

Ok so I did figure out how to fix the post width problems with the help of some CSS on this page. What I needed to do was simply set a margin on the side the post details would appear of 120px. This would offset the post to be to the right or left of the post details. I still have the problem with the links to the Home page, New Posts, Members, etc. not being centered and padded correctly. I would like to have them padded so that they fill the greybox exactly. Any ideas...or should I just leave this be?

[Airshow]

Where it comes to centre alignment, IE is pretty intuitive but the others, whilst probably more stadards compliant, aren't.

When all else fails, to center align a block element hoizontally, try the following CSS:

#whatever {
    width:200px;
    margin-left:50%;
    position:relative;
    left:-100px;
}

By making the left exactly -0.5 of the width, the element centre aligns - cross browser.

Overflow spoils things so may need to be controlled.

Play around with the values of margin-left and left for the effect you want, eg. left of center, right of center etc. (non-politically that is!)

For some reason I've never quite fathomed, you must specify width/left in px, not % otherwise alignment is unreliable.

Airshow