my newest positioning issue

[misterx]

Having recent success with some CSS layouts I figured I had it down pretty good and decided to convert my main page to CSS only. And now I know I was wrong...

here is the page
here is the style sheet

My probem is that in Mozilla(firefox) the topShape div doesn't sit below all the divs above it. It goes to the top as if it were positioned absolutely.

Can anyone see why this is?

Works fine in IE so if you have that laying around you can see what I'm shooting for. Both pages do validate in case you were wondering.

Thanks again.

[ronaldb66]

Width / margin / padding?

Try 'n reduce the width of the topshape div, or explicitly set its margin and padding to zero. If we're talking IE5.x/win, it implements the incorrect box model, remember?
A tip on the side: use ids for the various divs instead of classes; it'll allow you to simplify your styles.

[misterx]

No luck. =\

I explicitly set margin and padding and played around with a bunch of other attributes but it will still only display correctly in IE.

I suppose I could just give the topShape div a margin-top large enough to push it down to where I want it. But then I would have the problem of it displaying correctly in Mozilla and not IE.

I could also position it absolutely for that matter but I would really like to find out why this is doing this.

[me']

This is very odd. I don't see any reason for these boxes to act like this. What does the page look like in Opera, or Mac browsers?

(btw: you should be using background-image for just about everything, including that banner).

[Eskimo]

Its acting correctly believe it or not. Read this, and see if it makes sense as to why.

Make this one change and see if it works for you.

.row .left {
float: none;
}

/*EDIT*/
I may have answered a little to quickly, after closer investigation, I'm not sure you need: position: relative; on #header .topShape either.

[misterx]

That didn't help though it did produce some interesting results.

So the topShape div is acting like there is nothing above it because the divs above it are floated. According to the link you provided, everything else on the page will flow vertically as if the floated div didn't exist.

But I thought that's what this class was supposed to correct:

.clear {
   clear:     both;
   height:  0px;
} 

You may have noticed that I put an empty clear div as the last thing in the row div. Isn't that supposed to make everything else around it act like normal?

[misterx]

I think I fixed it!

Previously in my clear div I had this '<!-- -->' because....that's how I've been doing it for a while.

So on a whim I replaced <!-- --> with &ampnbsp; and my topShape div went down to where I want it in IE, Mozilla, and Opera!

W00T!

[Eskimo]

good to hear.

Why did you have a blank HTML comment in your div again?

[misterx]

I was doing that based on a tip I read in this article.

[me']

Originally posted by Eskimo
good to hear.

Why did you have a blank HTML comment in your div again?

Because floated elements are taken out of the flow, so a box with just floated elements in would have a height of zero. So we stick another nonfloating div that is told to rest after the floats with clear:both (normally), to give the box height.