Once again, I find myself tinkering with CSS...
In the current setup, the map container is scrolling on its own, separate from the rest of the content within the container. How can I enable the entire page to scroll when additional content is added to the content section?
I have experimented with the overflow attribute but haven't had much success...
Note for future reference:
body {
background:#000000;
margin:0;
padding:0;
overflow:scroll;
overflow-x:hidden;
}
#container{
position: relative;
height: 100%;
width: 950px;;
background: yellow;
margin-left:auto;
margin-right:auto;
overflow:auto;
}
#map {
position:absolute;
top:80px;
bottom:0;
left:0;
right:0;
background:#fff;
overflow:auto;
overflow-x:hidden;
}
#header {
height:80px;
width:900px;
background:#333;
margin:0;
padding:0;
}
#header h1 {
color:#fff;
margin:0;
padding:0;
}
#leftgradient {
width:50px;
height:80px;
float:left;
background:#096;
background: -webkit-gradient(linear, left top, right top, from(#000000), to(#333333));
}
#rightgradient {
width:50px;
height:80px;
float:right;
background:#096;
background: -webkit-gradient(linear, left top, right top, from(#333333), to(#000000));
}
#toppanel {
background:#179AE8;
width:950px;
height:50px;
}
#leftpanel {
background:#179AE8;
width:100px;
height:250px;
float:left;
}
#content {
background:#099;
width:850px;
margin-left:100px;
}
<div id="container">
<div id="leftgradient"></div>
<div id="rightgradient"></div>
<div id="header">
<header>
<h1>
Heading
</h1>
</header>
</div>
<div id="map">
<div id="toppanel">
top
</div>
<div id="leftpanel">
lefty
</div>
<div id="content">
Lots of text!!
</div>
</div>
</div>