Sent by Bruce Gilbert on 11 January 2005 22:10
On Tue, 11 Jan 2005 12:08:30 -0500, Bruce Gilbert [EMAIL-REMOVED]> wrote:
> hello,
>
> I have a bit of a dilemma here. I have a 3column page layout using
> divs and within the middle div, I have a smaller 3column div layout.
>
> the code in question consist of:
>
> <div id="content_columns_container">
> <div id="content_left_column">
> content goes here
> </div>
> <div id="content_middle_column">
> content goes here
> </div>
> <div id="content_right_column">
> content goes here
> </div>
> </div>
>
> Currently the 3 columns have no background or borders, but I was
> hoping to give them a border and light background. Therein lies the
> problem. I tried using the faux column technique from a list apart,
> but It only works when applying to the container div and I could only
> get it to be applied to one of the three columns. The CSS, I am
> referring to:
>
> background: #ccc url(../images/background-image.gif) repeat-y 50% 0;
>
> is there a way to achieve a background on all three of the smaller div
> columns and have the background stretch all the way to the bottom of
> the container div? If there is, I can't figure it out :-(
>
> URL: http://www.echs.dpsnc.net/testing/parents.htm
> CSS: http://www.echs.dpsnc.net/testing/DPS_top_level.css
>
> any assistance would be greatly appreciated.
>
> Bruce Gilbert
> webmaster
> DPS
>
>You just need to add another container and add the background for the
>right column to that container. Just make sure to make part of it
>transparent so the background for the first container shows through.
>You can keep layering containers with backgrounds on top of each other
endlessly for as many columns as you need.
>Zoe
thanks Zoe, I got the column backgrounds to work in IE, but they
aren't showing up in moz, NS, FF etc. not sure why. anyone have any
ideas?
css i'm using is :
#content_columns_container_left{
width:auto;
height:100%;
min-height:100%;
padding:0;
margin:0;
background:url(content_column_border.gif) repeat-y 0% 0;
}
#content_columns_container_middle{
width:auto;
height:100%;
min-height:100%;
padding:0;
margin:0;
background:url(content_column_border.gif) repeat-y 50% 0;
}
#content_columns_container_right{
width:auto;
height:100%;
min-height:100%;
padding:0;
margin:0;
background:url(content_column_border.gif) repeat-y 100% 0;
}
maybe I'm missing the transparent part, but I wasn't sure how to do that.
url: http://www.echs.dpsnc.net/testing/parents.htm
css: http://www.echs.dpsnc.net/testing/DPS_top_level.css
--
::Bruce::
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
