I am seeking assistance with a coding question related to HTML and CSS. Although I initially thought it would be simple to resolve, I am facing some challenges. My issue involves two side-by-side DIVs, one fixed-width and the other dynamic. The fixed-width DIV on the right is 400px wide and contains basic information. The goal is for the left DIV to fill the remaining space on the page. However, I also want the ability to hide the right DIV dynamically using jQuery and have the left DIV expand to take up the freed space. While I am aware of various solutions to achieve this, I prefer to minimize the amount of CSS manipulation within jQuery. Below is a snippet of sample code I have been working with.
<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>
One setback I encountered with this setup is that the right margin is permanently set at 400px. Therefore, if the right-side DIV is resized (to 0 width), the 400px margin persists. Essentially, what I require is a left margin equal in size to the right DIV.
I would greatly appreciate any assistance offered. Thank you.