How do I make one css section line up with a second one?
April 22, 2006 8:24 PM Subscribe
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?
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?
Best answer: 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
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   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
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
Response by poster: 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
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
« Older Academic and Non-academic fusion? | Is my computer possessed? My BIOS has a mind of... Newer »
This thread is closed to new comments.
.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