Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

2 column css layout without faux column

2 column css layout without faux column

Problem

I know the common solution to this problem is the faux layout, but that doesn't work for me because I have a section with a shadow that needs to extend over the sidebar. Are there any new work arounds for this issue? I'd like this content section to always be 100% of the #main, so the sidebar doesn't extend below it.

I've included the entire HTML / CSS.




    Test
I'd like this content section to always be 100% of the #main, so the sidebar doesn't extend below it.
Problem courtesy of: Brenden

Solution

You can use Jquery for this:

$("#main-content").height($("#sidebar").height() - 20);

-20 is the padding you applied.

Here is a working demo: http://jsfiddle.net/rniestroj/DEVha/

Solution courtesy of: Robert Niestroj

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

2 column css layout without faux column

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×