In my layout, I have 3 columns positioned next to each other: one on the left as the left modules panel, one in the center as the content column, and one on the right as the right modules panel.
This is how it's styled using CSS:
#left{
width: 20%;
float: left;
}
#right{
width: 25%;
float: right;
}
#content{
width: 55%;
float: right;
}
Here is the HTML structure:
<div id="right">
some module
</div>
<div id="content">
some content
</div>
<div id="left">
some module
</div>
The issue arises when I remove the div with id='left': the content div remains at 55%, and if I remove the 55% width, it fills the full width of the body. How can I ensure that the content fills the body from the right panel to the left border of the body automatically when the left panel is removed? I don't want to manually adjust the content width to 75% every time the left panel is removed - it should extend to fill the remaining space. I've tried searching for solutions to similar questions but haven't had any success...