I set up a two column box model site with a footer that spans the two columns. One column (A) has a white background and the other (B) a green background. Both are inside a larger container. Initially column A is longer than column, but sometimes column B will be longer as it contains a webyep item and the length of copy changes as the client adds and/or deletes copy.
My question is, how can I maintain the full color of each column to the footer. What has happened as the client has added text to the right column is that the color of the container now shows below Column A (as it is now shorter). The container has the same color as column B, but ideally I would like both columns to maintain their separate colors.
The best way I know is with “fake columns”. Create a background image
for your parent container box that is a stripe of color as wide as one
of your columns by 25px tall, and use tiling and placement to position
it behind the column.
So if you had a 400 px column on the left and a 200 px column on the
right that you wanted to have a background color, you could place a
200px x 25px background image on your parent box positioned at right
top, tile vertically, and no background on your two inner column
boxes. No matter which column is taller, the outer box will flex to be
the correct height, the stripe of color will tile down the right side
of that outer box, and the illusion will be complete.
Walter
On Nov 17, 2010, at 2:48 PM, Jeffrey Stern wrote:
Have a basic box model styling question.
I set up a two column box model site with a footer that spans the
two columns. One column (A) has a white background and the other (B)
a green background. Both are inside a larger container. Initially
column A is longer than column, but sometimes column B will be
longer as it contains a webyep item and the length of copy changes
as the client adds and/or deletes copy.
My question is, how can I maintain the full color of each column to
the footer. What has happened as the client has added text to the
right column is that the color of the container now shows below
Column A (as it is now shorter). The container has the same color as
column B, but ideally I would like both columns to maintain their
separate colors.