How to auto expand absolute positioned DIVs - css

Question

I have layout comprising of a 100% width header, 2 column content divs (30-70% width) and a 70% width footer (visible only in the bottom of right div).
My HTML mark up is like:
<section id="mySection" >
<header id="headerTop">
</header>
<div id="wrapperLeft">
</div>
<div id="wrapperRight">
</div>
<footer id="footerRight">
</footer>
</section>
My CSS is
#mySection
{
margin:0 auto;
padding:0;
text-align:center;
vertical-align:middle;
overflow:hidden;
}
#headerTop
{
position:absolute;
top:0;
left:0;
height:40px;
width:100%;
overflow:hidden;
}
#wrapperLeft
{
position:absolute;
top:40px;
left:0;
width:30%;
bottom:0;
overflow:auto;
}
#wrapperRight
{
position:absolute;
top:40px;
left:30%;
width:70%
bottom:30px;
overflow:auto;
}
#footerRight
{
position:absolute;
left:30%;
bottom:0;
width:70%;
overflow:hidden;
}
I would like to know if I can design this better such that if i hide the left or right div, the other div is displayed at 100%. I think i can change the CSS dynamically via javascript and adjust the left and width values for the other div, but it is getting messy and would like to avoid it if possible.
Ideally would love to call show or hide on the div and the other div automatically adjusts itself to 100% width.
I have no control over the height of the content in either div and would want the browser to display scrollbar when the content height exceeds the window.
Thanks in advance for your help.

Answer 1

I would add a wrapper to the divs so you can float then instead of positioning then absolutely. This way you can make at least one div 100% wide. For instance the right div. If you want both divs to be dynamic in size you will have to use jquery. For instance adding classes if you want to keep the jquery to a minimal.
example HTML:
<div id="header"></div>
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
example CSS :
#main{
position:relative;
overflo:hidden // This will make the container grow with the children
width:960px;
}
#left{
width:200px;
float:left;
height:100%;
}
#right{
float:left;
width:100%;
height:100%;
}
Example of CSS with additional classto toggle divs
#main.only-left #left{
width:100%;
}
#main.only-left #right{display:none;}

Answer 2

I think I know what you're talking about. I've created a little example here. Basically set 30% on the sidecolumn, and display: block; on the main column. Click on the body anywhere to toggle the side column to show how the main column adapts... is this going in the right direction?
Codepen sketch
HTML
<div class='wrapper'>
<header>Header</header>
<section>
<aside>Sidebar</aside>
<article>Main article</article>
</section>
<footer>Footer</footer>
</div>
CSS
body {
margin: 0;
padding: 0;
}
section {
overflow: hidden;
position: relative;
}
header {
background: crimson;
height: 100px;
width: 100%;
}
aside {
background: #efefef;
float: left;
height: 300px;
width: 30%;
}
aside.hide { display: none; } /** For demo purposes **/
article {
background: #ccc;
display: block;
height: 300px;
}
footer {
background: crimson;
float: right;
height: 100px;
width: 70%;
}
jQuery (just for hideToggle example)
$('html').on('click', function(){
$('aside').toggleClass('hide');
});
UPDATE: Here's an example with a little assitance from jQuery for class toggling. Could probably be generalized more... http://codepen.io/kunalbhat/pen/kuAcg