CSS visual flick

Question

My CSS knowledge is very limited, so I'm putting my problem here hoping for the best.

I'm using this box: http://www.456bereastreet.com/lab/flexible_custom_corners_borders/ in my website, and I need to display content in two columns format.

I've attempted with the simple table, and using divs with float set (needed clearfix so the parent got its height). My problem is a visual bug that appears of the left side.

Only happens with table and div floated. p, h1, etc works fine.

Here is a picture of the bug: http://img18.imageshack.us/img18/8783/imagem2hdp.png

Thanks

edit: Here's the code: http://dl.getdropbox.com/u/178438/css_test.zip

Answer 1

You should set a background color for .content this will hide that part of the border image.

--edit below--

The extra whitespace between the gradient and the border looks like an element is being pushed sideways, when it's really all part of the left border background image which is the second main div.

div // Right border
    div // Top border with corner sub divs
    div // Left border
        div // Content
    div // Bottom border with corner sub divs

Since the content part of the box is inside the left border div and the border background image is done sprite style with multiple images put together in a larger image the only CSS only solution to this is to apply a background color to the content area to cover the left background image (like the Left background div is doing to the right background div)

There are other ways to fix this such as separating the images out into separate files or moving the Content div outside of the Left border div, but at that point you aren't really using that same box anymore.