Tips on doing CSS layout

Also, am I doing it right?

Any comments on the CSS?

I think you should use the validation services as there are a few xhtml errors. (<div id="dhtmltooltip"></div> in the head part ...)
the css in your html has a comment problem (border:1px solid black; */) closed but never opened.
I suppose you didn't test your page with mozilla / firefox as the DIVs overlap and your footer is in the middle of the page.

To be honest with you I find the layout perplexing and am wondering how you arrived at it; whats the #divider achieving ?

I would look at the table-layout property your using, how do you see that effecting your layout, are you assuming that it is actually causing those divs to behave as though tables? as far as I was aware this property was for use in conjunction with tables to dictate how the table was rendered and that on it's own did not actually do anything.

I think that you need to take a different approach to how your laying this out, your footer in FF is some way up the page behind the lower boxes and needs to cleared bellow them.

Hugo.

Thanks for the replies, but this is my first CSS layout, although I know failry well how to use CSS. But I have absolutly no idea how to approach how to code this layout. I have read many tutorial, but none of them seem to talk about what I want to do.

The layout doesn't need to be as complicated as you have it... Looks to me like you could just use a 2 column approach with a header and footer. The "blocks" of info (text, photos, whatever) can be positioned in your columns.

tspersonal5

tspersonal5

I completly agree. So do you suggest I simply do my header, two colums, then my footer? After that is done, do my other CSS tables within those two colums?

I am still a bit troubled on how to do the Featured Band, Latest News tables eficently :?

Thank you.

I made my layout with a headert, two colums and footer. But i'm stuck dividing my header into three parts.

I have

<div id="container">
	<div id="header">
		<div id="ad">
		<div id="logo">
dhhhh
		</div>
		<div id="login">
			Username: <input type="text" /><br />
			Password: <input type="password" />
			<input type="submit" name="Submit" />
		</div>
<img src="with_honor.gif" alt="" />

	</div>
		<div id="left">
		
		</div>

			<div id="right">
			
			</div>
			<div id="footer">a</div>

</div>

 #footer
{
	background-color: #000000;
	width: 100%;
}

- But the footer does not appear, any ideas?

Thanks.

Have you got a link to the page ?

Do you want to update us with a new link then? I presume the original link is now out of date.

http://review4u.org/new/OMGZ.html

Sorry about that, my internet is really dumb so I couldnt upload the files.

You need to pay attention to escaping floats, header needs to contain the elements that are nested in it; if it does then it will allow the right div to slide up alongside the left, your footer will then take up position bellow those two floats.

It's just a case of understanding how floats work and that with the login and image dropping down there wasn't room for the for the right float.

Hugo.