View Full Version : Transitioning to 3 fixed column CSS

10-29-2007, 09:46 PM
I'm working on developing a standardized layout in HTML and CSS that will match the look-n-feel of this page (http://www.dfpd.org/index.html), which as you can see makes extensive use of layout tables, and generally seems hacked together. We're rolling out a bunch of additional sites and I want to do it "the right way".

I'm working on this new page (http://www.jpmeredith.com/deerfieldparkfoundation/test8.html), building on the static 3 column from Dynamic Drive.

I'm completely blown away by how insanely different IE and Mozilla are rendering the page -- I'd read about the headaches but now that I'm actually wresting with it, it's shocking. I think I can figure out how to get the columns to stop at the same time down at the bottom of the page, so for now my question is:

How can I get the 3 column "News/Announcements/Updates" section that you can see on the old site to appear below the left and center column on the new site? I haven't tried to wrap my brain around another whole set of nested DIVs, but is that even worth trying? Or am I headed for a migraine?

10-30-2007, 05:11 AM
add this line:

<div style = "clear:both;"></div>

<div id="footer">
and you should be good!

10-31-2007, 02:19 AM
Ah, most excellent. I've made the chance and and it evened up the columns.

Did I just need something in there to break up the column format and stop the "even column" code from spilling down 10,000 pixels? (I'm actually trying to learn the "why" in addition to the how)...

Next up is the embedded columns, which I think I can do with margins pretty easily, as long as it's inside the main container DIV. Further bulletins as events warrant.

10-31-2007, 08:59 PM
Hi! there.

In my signature at the bottom there is a URL with links to very many helpful sites. Maybe something useful there.


10-31-2007, 09:35 PM
Okay. For the recond, I'd like to state that Microsoft's Web Expression is pretty awesome. I managed to mangle the layout that dcostalis helped me with earlier, and in a fit of frustration I loaded the 3 column template included with Expression. A few tweaks here and there, and everything came together -- passed the validator on the first try and looks good in all browser flavors I've tried so far. I think the key is a mixture of floats and fixed positioning (I really liked the thread (http://www.codingforums.com/showthread.php?t=126382)posted here in this forum too).

I wonder if anyone could take a quick look and see why there is a white bar at the bottom of the screen please? I'm getting better and figuring out all the border/padding/margin stuff, but this one has me stumped:



11-01-2007, 12:20 AM
#footer p { margin-top: 0; }
should work

11-01-2007, 04:11 AM
Thanks jlhaslip, that sure did it. I was focused on something above dangling down instead of something from below poking up.

11-01-2007, 04:56 AM
Firefox 2 with Firebug to inspect the elements on a page.

Rarely disappoints me.

11-01-2007, 05:18 AM
Yep, I installed it yesterday and it's a nice tool, I just found the thingie that lets you view borders/margins/padding. Nice!

11-01-2007, 10:33 AM
Yep, I installed it yesterday and it's a nice tool, I just found the thingie that lets you view borders/margins/padding. Nice!
This may interest you. IE and Firefox on screen together.