I have a quick question about HTML and CSS. I thought this would be easy to track down, but it’s turning out to be quite the challenge. Essentially, I have 2 DIVs that are side by side, one that is a fixed width and one that is dynamic. The one on the right is a fixed-width, 400px DIV that holds some basic information. The one on the left is supposed to just fill the rest of the page. But there’s a catch, I want to be able to dynamically hide the right DIV at any time (using jQuery) and have the left one fill its space. I know that there’s several ways to do it, and I already know a few. But I want to do as little CSS manipulation in jQuery as possible. Here’s some sample code I have.
<body>
<div id="right"></div>
<div id="left"></div>
</body>
<style type="text/css">
#left {
height: 100%;
margin-right: 400px;
}
#right {
float: right;
width: 400px;
height: 100%;
}
</style>
The problem with this is that the right margin is permanently set to 400px. So if the right side were to be re-sized (to 0 width), the 400px margin would remain. Essentially, I need a margin on the left that is the size of the div on the right.
Any help is much appreciated.
You don’t need the margin-right: 400px
See live demo:
http://jsfiddle.net/uxCpy/1/