[Aken]

Originally Posted by 5th-Level

add the positions such as

.bl3 {background:url(http://www.sitepoint.com/examples/roundcorners/bl.gif) 0 100% no-repeat #393939 top left; }

that will make the corners fixed in the cell

This will not help for two reasons:

1) The position of the background is already defined with "0 100%".
2) The background position is not what is causing the problem.

AzzidReign: Your problem is that the content for each section is now residing in a <div> element. Unfortunately for you, a <div> element does not automatically assume the dimensions (specifically height) of its parent element (in this case, the table cell) unless given the appropriate CSS attributes.

You will have to define a height for the table cells on your homepage, and then add a height: 100%; attribute to each of your CSS classes. The reason you have to define a height for the table cells is because the CSS height: 100%; doesn't work if it doesn't know what the total height is. It will take away some of the effectiveness of dynamic content since everything will have to be the same height, but it will add some uniformity and it will make your style work properly.