Currently, I am in the process of constructing a website that requires a menu to gracefully slide from the left side of the screen (with a width of 0px) to the right side (expanding to a width of 250px), all with the help of jQuery animations.
Here is what I have done so far: I created a main container div, and within it, two nested divs called #menuLeft and #content.
The question that arises now is how can I set the width of #content to match the remaining space on the screen using CSS? This might be a bit tricky considering the container has a width of 100% and #menuLeft's width varies.
Your insights would be greatly appreciated!
Below is the HTML structure:
<div id="all">
<div id="leftMenu">
</div>
<div id="content">
</div>
</div>
And here is the accompanying CSS:
#all {
position: absolute;
top: 0px;
left: 0px;
background: #445566;
margin: 0 auto;
padding-top: 40px;
width: 100%;
height: 2000px;
}
#leftMenu {
float: left;
background: #888888;
height: 1000px;
width: 250px;
}
#content {
float: right;
height: 1000px;
background: #55ffaa;
width: 1000px;
}