2 column css layout without faux column

Question

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.

<html>

<head>
    <title>Test</title>

    <style type="text/css" media="screen">
        * {
            margin:0;
            padding: 0;
        }
        body {
            background: #ccc;
        }
        #content {
           width: 900px;
            margin: 50px auto;
            background: #fff;
        }
        #main {
            overflow: hidden;
        }
        #sidebar {
            width: 180px;
            float: left;
        }
        #sidebar li {
           padding: 10px;
           border-bottom: 1px #ccc solid;
        }
        #main-content {
            -moz-box-shadow: 0 0 25px rgba(0, 0, 0, .5);
            -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
            box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
            float: left;
            width: 700px;
            padding: 10px
        }


    </style>

</head>

<body>

    <div id="content">
        <div id="main">
            <div id="sidebar">
                <ul>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                  <li>Item</li>
                </ul>
            </div>
            <div id="main-content">I'd like this content section to always be 100% of the #main, so the sidebar doesn't extend below it.</div>
        </div>
    </div>

</body>
</html>

I'm curious, in your use case can your sidebar be longer than your content as well as your content to be longer than your sidebar? I'm not visualizing how a faux column couldn't work. If it's because of needing 2 background images you can always add another DIV wrapper as hm. answered below and CSS3 has multiple background images with what looks like decent support (caniuse.com/#search=multiple backgrounds) — jmbertucci
– jmbertucci, Commented Jun 6, 2012 at 22:09

Robert Niestroj · Accepted Answer · 2012-06-06 21:41:37Z

1

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/

answered Jun 6, 2012 at 21:41

Robert Niestroj

16.2k15 gold badges84 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hm. · Accepted Answer · 2012-06-06 21:38:48Z

0

you can set up a div wrapper with a background image. inside of this wrapper, you place the two floating divs under the two floating divs - but still inside of the wrapper - you kill the float with the following line:

<div style="clear: both; height: 0; overflow: hidden;">&nbsp;</div>

answered Jun 6, 2012 at 21:38

hm.

1861 silver badge10 bronze badges

Collectives™ on Stack Overflow

2 column css layout without faux column

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related