Wrap leftColumn1 and leftColumn2 in a parent div (let's call it leftColumnWrapper).
Then style the leftColumnWrapper with a background image of 1px height and 495px width. The image should have a grey dot on pixel 250 and 495. Make the background image repeat-y. This will allow the "border" (which is created now by the background image) to scale the entire element space, regardless of which child column is bigger. By the way, delete all those empty <p> tags. Once you do that, you are going to experience the same problem that I have answered in other e-mails. You will have 2 child elements that are floating, but you are not clearing them correctly. This will prevent the background-image from leftColumnWrapper from showing up. Clear the floats correctly, and the background-image will show. Here is a copy of the e-mail I sent out on how to do it: The problem you are having is that you are floating content and > sidebar_container, however you are not clearing them properly. > > This article explains the problem, and has as a detailed explanation with a > full solution towards the bottom: > http://www.positioniseverything.net/easyclearing.html > > You should read it to understand what you are experiencing. If you don't > want to use IE conditional commenting, then google clearfix and find > another solution that does not contain conditional commenting. > > Once you put in the CSS clearfix in your CSS, then add a classname of > clearfix to the sidebar_container. If that doesn't fix it, add the > clearfix to content as well. > Good luck! On Wed, Jan 7, 2009 at 4:23 PM, [email protected] < [email protected]> wrote: > > I have the following CSS code in my stylesheet: > > #pagecontentleft {float: left;width: 501px;text-align: left;line- > height: 20px;padding: 0;} > #pagecontentleft p {margin: 0;padding: 6px 0px 6px 6px;} > #leftcolumn1 {float: left;width: 249px;height: auto;border-left: 1px > solid #F2ECCF;} > #leftcolumn1 p {padding: 0;} > #leftcolumn2 {float: left;width: 248px;border-left: 1px solid > #F2ECCF;border-right: 1px solid #F2ECCF;} > #leftcolumn2 p {padding: 0;} > > Here is an example of that section, within a page on the site I am > developing. "pagecontentleft" is the main area on the left containing > the large photo and text and, below it, the two float regions aligned > horizontally: > http://www.tmsa.org.uk/DRAFT/test.asp > > As you can see, if the text content of the box on the right is less > than the box on the left, the border will not run the full length of > the first box, which looks disjointed. > > How do I set "leftcolumn2" so that it runs the same length as > "leftcolumn1"? > Similarly, if the content of leftcolumn2 is larger than leftcolumn1 > then I also need to to be the same size. > I need both areas to be flexible, rather than a specified height, as > there will be varying content in both. > > Appreciate the help, thanks. > Regards > Nath. > > > > -- -Richard Aday --~--~---------~--~----~------------~-------~--~----~ -- You received this because you are subscribed to the "Design the Web with CSS" at Google groups. To post: [email protected] To unsubscribe: [email protected] -~----------~----~----~----~------~----~------~--~---
