annoying css problem i always forget solution to

[unwashed potato!]

to put it simple i have 2 divs called shadowLeft and shadowRight, each gives a shadow effect for the content area for the left and right sides.

the content area's height can be anything as each pages content is based on a database so i can't set a height for it and this is the problem, as no height is set it's not being displayed.

i have tried everything i can think of such as height: auto, inherit, 100% etc but nothing makes a difference.

so please ocuk help me out

 

[unwashed potato!]

This link has the method I've found to be the best for 3 col CSS layouts, it should be pretty straightforward to adapt it to have shadows in the left/right columns.

http://matthewjamestaylor.com/blog/perfect-3-column.htm

had a quick look and can't see how i'd add shadowLeft and Right as no height has been set for anything which is basically what i have.

my code:

.content {
    background: #005500 url('images/bg/contentBG.gif') repeat-x;
    width: 910px;

.contentArea {
    width: 830px;
    float: left;
    margin-top: 50px;
    margin-bottom: 50px;
}


.shadowLeft {
    background: url('images/bg/shadowLeft.png') repeat-y;
    width: 40px;
    float: left;
    height:auto; 
}

.shadowRight {
    background: url('images/bg/shadowRight.png') repeat-y;
    width: 40px;
    float: right;
    height:auto; 
}

}