How do I make one css section line up with a second one?

April 22, 2006 8:24 PM

How do I make one css section line up with a second one?

I've asked this on other web sites, and either it's too complicated to answer on a forum or too simple that I sound like an idiot for asking...please help this dummy.

I'm a css amateur and I'm tasked with trying to complete an upgrade from Zencart 1.2.6 to 1.3. Zencart 1.2.x lays out products and categories using tables, and 1.3 changes to using css. The pages in question have different sections.

On pages with a small # of categories like this one, see how there's a big gray area under the categories because it doesn't extend to the "advanced search" section. Whereas when the # of categories extend below the advanced search area, like this, there isn't this problem.

I think it's a css issue, going from tables to css div's but I have no idea how to fix this. I'm guessing I have to add some sort of auto padding or something to make the white background extend to the bottom? Is this (hopefully) just a simple one line "blah blah add padding" fix?

posted by edjusted to Computers & Internet (5 answers total)

I don't know how nicely it plays with pages of differing amounts of content, but in the css where you go:

.centerColumn {
PADDING-RIGHT: 0.8em; PADDING-LEFT: 0.8em; PADDING-BOTTOM: 0.8em; PADDING-TOP: 0.8em; HEIGHT: 100%; BACKGROUND-COLOR: #ffffff
}

You could maybe just replace the HEIGHT:100% with a fixed height.
posted by juv3nal at 8:37 PM on April 22, 2006

If you just need the white to extend to the bottom, try adding

table#contentMainWrapper{background: #fff;}
td.footertop{background: #5A5C5D;}
posted by the jam at 9:15 PM on April 22, 2006

All that padding will lead to box model issues. Use margins instead. And you're using all sorts of tables and &nbsp tags in your code. If you're going to go for a CSS based design, you should lose all this unnecessary bloat. That is if this zencart thing will allow you to . . .

Anyway, put your columns in a wrapping div, as the jam suggests. Float both left. Then add your footer div beneath them and set clear: left. That will draw the wrapping div all the way down. If this doesn't make any sense to you, drop my an email and I'll send you some examples to work from.

Don't feel like a dummy for asking this. CSS layouts can be somewhat confusing, especially when you're working across platforms and browsers.
posted by aladfar at 10:05 PM on April 22, 2006

You're looking for Faux Columns.
posted by ubernostrum at 10:51 PM on April 22, 2006

Thank you all for your advice!

Adding this to my css file did the trick:
#contentMainWrapper {
background: #fff;
}

And aladfar, yes, the problem is that zencart went from using tables to all css. I'm still in the process of debugging and converting, so that's probably why it looks pretty messy. Thanks!
posted by edjusted at 1:37 PM on April 26, 2006