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

 

[t31os]

Can you post the code for the content area including aforementioned DIVs to and i'll do my best to help.

 

[GravyMonster]

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

 

[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; 
}

}

 

[Tripnologist]

Couldn't you just put the shadows together in one png and add another container to apply it to? Then it's height would be set by whatever height your content is.

 

[Ladforce]

Couldn't you just put the shadows together in one png and add another container to apply it to? Then it's height would be set by whatever height your content is.

Yea thats what I do on my site, then you can repeat Y the shadow and put a shadow bottom underneath the shadow container to finish it off.

 

[t31os]

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; 
}

}

Can you post the HTML also.

It's definately possible, and in theory you shouldn't have an issue.

Might be able to archive this using a UL > LI style layout.

Ideally a link to the site in question would be helpful to see the problem in effect.

 

[markeh]

Put a container div around the content div, make the shadow bg's one image and make that the bg of the container?