Odd bottom spacing problem

[FabianN]

I think this is a CSS related problem, but truth be told I'm not completely sure. The site that I'm putting together is using Nifty Corners Cube to make rounded corners. It's a really easy to implement.
Anyway, I'm working on the template for my blog layout.
You can see what I got here:
http://www.monkeysinabarrel.com/template/blog.html

Just by looking at it you should be able to the problem.
I want the side-bar to be the same hight as all the combined posts on the right.
Now, thanks to Nifty Corners there is an easy way to do this.
If you look at the peice of code that tells which element to apply rounded corners to
http://www.monkeysinabarrel.com/template/niftylayout.js

Code: Select all

Nifty("div#content,div#side","same-height right");

The code that I quoted above makes two listed elements(
div#content,div#side) the same hight with the "same-height" tag.

Simple enough to understand, yes?
So anyway, the div#content tag surrounds all of the posts which should make it the same hight as the blog posts, which would then make the side-bar the same hight.
It works perfectly like that in FF when there is only one post:
http://www.monkeysinabarrel.com/template/blog1.html

But like seen above, once there is more than one post , the posts leak out 10 pixels past div#content, which shouldn't be happening.

Now, what make me think that this is related to the CSS is, for each blog post I have a bottom margin of 10px.
When there are two posts, and I change that margin to 20px, the side-bar aligns just perfectly.
When there are three posts, and I change that margin to 30px, again the side-bar aligns.

Thing is, I don't want to have a 30px spacing between each blog post. Thats just over-kill.
Does anyone have an idea on how to fix it?
here is a list of the important files
single blog post:
http://www.monkeysinabarrel.com/template/blog1.html
two blog posts:
http://www.monkeysinabarrel.com/template/blog1.html
CSS:
http://www.monkeysinabarrel.com/template/blog.css
The important CSS elements are div#content, div.post, div#side

If theres anything that I'm leaving out, just ask.
I've been playing around trying to fix this for the past few hours and got nowhere.

[craig]

One way I can think to solve this is to have a background image in #content to give the impression of that yellow column, and just have the text in that column on a transparent background.

Trying to get columns to line up with CSS is something which has been tried many times, but people end up reverting to the faux column which i just explained.

Hope this helps,

Craig

[Lchad]

I would use faux columns as well.

See if overflow:hidden; works on the side div.