I decided this old dog needed to learn some new tricks, so I just finished doing an entire layout with divs instead of tables. I'm surprised this is my first trip here about this, but I made it to the end and got within 99.X% of the same table layout.

Anyhoo, I got down to the footer and am having a bit of an issue. I've got a header div, with a main div below that, it has a left and right div inside it. Now below that main div I'm trying to add the footer div.

If I add margin-top to the footer CSS, I get the appropriate margin between the main div and the footer div in IE. In Firefox it is still flush with the bottom of the main div. If I add a br style="clear:both" tag between the 2 divs, I then get the appropriate margin in Firefox, but an additional line break in IE. A break tag with no style results in the same in IE, still flush in Firefox (with the clear:both added to the CSS).

Any ideas?


<div id="header"></div>
<div id="bodywrap">
<div id="leftcontent"></div>
<div id="rightcontent"></div>
</div>
<div id="footer"></div>



#bodywrap { width:750px; margin-top:7px }
#footer { clear:both; width:750px; margin-top:7px; padding:3px 0px 3px 0px }

First off, add &nbsp; to your divs so they aren't empty and try it with your css. DIVs aren't displayed the same in IE and FFox if they are empty.

They're not empty, I just took out the irrelevant content inside them for posting.

Guess I should've made mention of that.

Use clear:left, clear:right or clear:all instead of clear:both. If you're going to clear lots of floats, use <div class="clear"></div> (with css: div.clear { clear: all; }) between divs where you want to clear floats.

Anything other than clear:both, the whole layout gets messed up. It's like the footer takes over the entire layout. With clear:both it looks right, there's just not a margin. I hadn't tried the div idea, but it didn't work.

Just tried with a table, with the same CSS, and it works perfect of course.

The 2 things that should've been a pain in the *** for me, went quite easy. This seemingly simple thing is being a pain.

Use clear:left, clear:right or clear:allThere is no such thing as 'clear: all'.

Moved to Web Design and Content, probably better here. :)

Not a problem Tyler. :) I'm so used to going to the Programming forum I guess.

There is no such thing as 'clear: all'.
I didn't think there was, but sometimes I get surprised.

It doesn't seem to be clearing the bodywrap div at all. I had to make a change in the rightcontent div and when it shortened up, the footer followed it right up the layout, instead of staying below like I would expect.

That's either typical div behavior or a problem.

I'm glad this is more of an experiment on whether I could actually do a tableless layout rather than relying it. I think I'll stick with what I know. Tables don't take [me] days to figure out and I don't have to hack them to work in multiple browsers, they just work.