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>
You can use Jquery for this:
$("#main-content").height($("#sidebar").height() - 20);-20is the padding you applied.Here is a working demo: http://jsfiddle.net/rniestroj/DEVha/