View Full Version : How do you split the background into two sections?

Nov 8th, 2009, 07:41 PM

How do you make it so that one side is filled with one background color even if the other side has a larger height (without the use of background images)?

Nov 8th, 2009, 07:43 PM
#div { background-color:#f7f7f7; }

Nov 8th, 2009, 07:48 PM
Hello Pykex,
Give your background color to a container div and nest your larger height div inside that.

Here's a simple example - http://nopeople.com/CSS/equal_length_columns/index.html

Nov 8th, 2009, 11:14 PM
But what if both contents can be large than one another?
For instance, what if the right column was smaller than the left column as it has less content in it (and vice versa)?

Nov 8th, 2009, 11:27 PM
That layout is kind of either/or. You have to know which column is going to be the longer one and make sure thats the column that is sizing the container.

You can make both columns match in height, no matter the content, by using faux columns. Google that or look at this example - http://nopeople.com/CSS/faux_columns/index.html