Currently, I find myself on a website layout where the banner remains fixed at the top of the page while allowing scrolling for the inner div. However, when I zoom in using the browser (ctrl+'+'), the banner overflows the container without making the container horizontally scrollable. The inner div also overflows and becomes scrollable. Fiddle css:
div#container
{
/*overflow: hidden;*/
max-width: 98vw;
height: 100vh;
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto -10px;
overflow:auto;
}
div#main_outer {
min-width:100%;
max-width:100%;
overflow: scroll;
height: 90%;
}
div.main {
position:relative;
max-width: 100%;
min-width: 1800px;
min-height: 90%;
width: 1800px;
height: 800px;
display: table;
margin: 0 auto;
overflow:auto;
}
div#banner {
position:relative;
top:0;
left:0;
right:0;
z-index:1;
font-size:25px;
max-width: 100%;
height: 10%;
width: 1800px;
height: 80px;
display: table;
margin: 0 auto;
background-color: #ffcccc;}
I wish to have the banner and inner div always maintain the same width as the container and make the container horizontally scrollable when they overflow...