Making DW Templates, Doing Semantic Mark-Up, Using Floats...and IE

[TheBrownRecluse]

I have a problem with IE 6 and 7, but if I solve one, then I solve both.

Here is the website.

http://www.iseoyou.com/noelsbedandbath/examplefile.html

what I'm trying to do is get the footer to fall below and be in relative distance to, the #maincolumn content, so that it moves down and up based on the amount of content that is in it. In the same breath, I want to be able to add as much content as I want, without the #toolbar and secondary navigation moving up and down.

With every other browser, I've managed to do this, with the possible exception of IE, and version 7 no less.

the main problem is, the footer seems to be following the distance on the browser from it's relation to the actual document structure. I don't want to move the footer or anything else in anyway because this format of the template is going to be the trend for other templates after it, and I want to make it search engine friendly and accessible.

Question #1: How can I get the footer to be in relation to the main column so it doesn't move up past the main column information (ie below the #subnavigation).

Question #2: How can I keep the header, logo and toolbar from moving up when I take content out...in IE. How can I keep it from doing this?

http://www.iseoyou.com/noelsbedandba...mplefile2.html

PS I need to be able to resolve the footer issue, before the margin issue.

Thank you for any help that would come my way.

[chowell]

I'm not a CSS expert by an means, but it looks like you have the footer menu distance from the top hardcoded in (possibly?). Why don't you try adding something so that the footer DIV starts at "-50px" from the bottom of the page (vs from the top).

I'm just throwing this out there... I could be way off. (sorry)

[TheBrownRecluse]

yeah, I could do that, but it would be still basing it's margin from the bottom of the #subnavigation, and not the main content. It wouldn't solve my problem either because anytime I would have to add new content, it would still overtake and run behind the footer.

THanks for the try though.

[TheBrownRecluse]

It seems that I've solved my footer problem.

What I've done is, I've moved up the ending Div for #contentcontainer above the #divider, and I put a div called "divend" right before the ending div of the contentcontainer.
In the CSS for IE, I put {clear: both} for #divend and erased the clear rule out of the #divider, where it was originally.

THis worked great for IE, but didn't fare so well every other browser. The white background shot up like a cartoon window blind. I did the same thing with the original css, and then it worked fine.

Now I still have the problem with the header, toolbar and subnav moving up and down based on amount of content.

Any help would be appreciated.

[bj]

Your layout is not hardened against text resizing at all. You can't assume that others use the same font size as you do. To see what the problem is, simply view/text size and make it larger. Go to largest in IE and three clicks in FF (hint-- you get some overlap on the very first click.)

In future, use a layout that has already been vetted against this kind of stuff. I recommend looking here:

Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!

Any one of these layouts work no matter which column is longest.

[weslinda]

Have you tested this in IE6? If not, you should, as it is broke so bad it isn't even funny.

The easiest way to keep a footer below all is to set a container for the whole content, then set the footer as a float left with the same width.

Wallah!

[weslinda]

Oh yeah, great resource BJ.

[MarkGatESS]

Originally Posted by bj

In future, use a layout that has already been vetted against this kind of stuff. I recommend looking here:

Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!

Any one of these layouts work no matter which column is longest.

Thank you so very much for posting that link! I downloaded the entire collection (allLayouts.zip) of layouts. That is SO much easier than racking my brain trying to figure out how to get a layout to work right. I might FINALLY be able to ditch using tables for my layout.

I feel like I was shown where the best place to dig for gold is and struck big!

[weslinda]

The key in the longterm is to really educate yourself on CSS. Learning how each part of the CSS structure works can really help you in your longterm understanding of how to build great sites.

Relying on resources such as the one BJ provided, without learning the reasons each one works the way it does is only leaving yourself behind the rest of the pack.

[alextj]

Here's a good starter for understanding how and why 2 Column CSS Layout - TheVanBlog
I use the same layout on my websites and it works well with no need for clear: or any tricks - just float the nav (in your case right) out of the div flow and set a min-height e voila, couldn't be easier (and cleaner).
Take care,
Alex

[ScottR]

Another great site for CSS positioning - with a focus on cross-browser support:

/* Position Is Everything */ — Modern browser bugs explained in detail!