Hello. I have two columns that are pretty much both made up of 3 divs containing background textures - a top, a bottom and a middle repeating div for varying content. However, I was curious to know if one column had more content than the other, could the other column somehow automatically extend its length to match up? Please see the example link posted which shows the problem I'm talking about.

Thanks in advance!

3 answers

3
points

Your best bet is to utilize a method known as "faux columns." It uses a vertically-repeating background image to ensure your columns "appear" to be of equal height, regardless of the length of the content.

This writeup at A List Apart has all the details: http://www.alistapart.com/articles/fauxcolumns/

Answered almost 7 years ago by Dwayne Anderson
  • lol, exactly the same article I was going to link to :) danwellman almost 7 years ago
  • lol... I saw that too, and tried to leave a similar comment on your answer. Dwayne Anderson almost 7 years ago
  • Thanks for the help folks! Unfortunately, I don't think this method will help because I have specific background images in bottom divs that need to stay anchored bottom. For example I need this to repeat for however long with the content or to match up with the right column. http://www.poemswithmelodies.com/temp/images/bg_poetrySidebar3.jpg And then I need this to cap off the bottom http://www.poemswithmelodies.com/temp/images/bg_poetrySidebar3.jpg This "faux columns" method seems like it doesn't allow the complexity with what I am trying to achieve in background imagery and repetition. If I am wrong however, please elaborate for me. Thanks so much. Mawkus almost 7 years ago
  • I think it could work... but perhaps not right out of the box. As for the column bottoms, you could create a graphic that contains said treatment for the bottoms of your columns, and flow it in right below your columns. Dwayne Anderson almost 7 years ago
da 40
0
points

If you're site is already using jQuery, it's fairly easy to to a quick compare of the heights of both and tweak the short one as needed.

Answered almost 7 years ago by da
Mawkus 5
0
points

Thanks for the help folks! Unfortunately, I don't think this method will help because I have specific background images in bottom divs that need to stay anchored bottom.

For example I need this to repeat for however long with the content or to match up with the right column. middle bg image

And then I need this to cap off the bottom. bottom bg image

This "faux columns" method seems like it doesn't allow the complexity with what I am trying to achieve in background imagery and repetition. If I am wrong however, please elaborate for me. Thanks so much.

@ DA - Is there a name for this specific jQuery function?

Answered almost 7 years ago by Mawkus
  • make one image that conatins the bottom portion of both columns... flow it in right below the faux column container... Dwayne Anderson almost 7 years ago