how to force sidebar background to fill container element

[smcr]

I’m trying to clone my static HTML/CSS site into a wordpress-themed site, and need help with a sidebar element. The main layout is a content area with left and right sidebars.

The left sidebar will be a vertical menu with a transparent background. I would like to combine the content area and the right sidebar area, visually, into one common background.

I have styled the content area and the sidebar to share the same background color, with zero margins so there is no seam between the two.

The problem is that the sidebar background does not extend to the same length as the content area, so the illusion of the two elements sharing one background is lost.

The two elements share a parent container element, and I am wondering if there is a CSS rule that might force the sidebar background to fill that parent as does the content element.

Sorry if this is convoluted, and thanks for any help or pointers!

[Paulie_D]

Do you have a link or could you make a Codepen reduced case?

[smcr]

Unfortunately I’ve got this running on a localhost so don’t have a link. I could put the HTML in Codepen, but there’s a ton of CSS, and I’m not sure how I would show all of the pertinent code.

Asked another way, if I had three Div’s in a container as columns, left, center and right, is there a way to force the background of the right Div to fill the height of the main container, which is dictated by the content of the center Div?

[PicnicTutorials]

Here is the easiest way you will ever find. Change no html. Just add a couple lines of css http://www.websitecodetutorials.com/code/css/css3-faux-columns.php

[smcr]

Thanks, it looks like mine is an old problem: equal height columns. These are some good leads, and I’m sure they’ll provide a solution.

[Author]

Posts