In my CSS code, I am trying to achieve a layout where the navigation and website sections are absolutely positioned so they can slide back and forth when a menu button is pressed (similar to the Facebook app). My approach involves placing them within a container with an overflow: hidden property to hide and reveal the navigation bar as needed. However, I'm facing an issue where the container loses its automatic height due to the absolute positioning.
Is there a way to restore the automatic height functionality while still using overflow: hidden without including absolute positioning?
I have set up a Fiddle in which the container has a fixed height of 500px. My goal is to make the height adjust automatically. See the Fiddle here: http://jsfiddle.net/rB7EY/
div {
box-sizing: border-box;
}
.container {
overflow: hidden;
width: 100%;
max-width: 60em;
padding: 0;
margin: 0 auto;
position: relative;
background: grey;
height: 500px;
}
.navigation {
width: 15em;
float: left;
background: blue;
position: absolute;
left: -20px;
}
.website {
width: 100%;
float: left;
position: absolute;
left: 0px;
}
.container .website .top_bar {
height: 4em;
background: pink;
padding: 1em;
position: relative;
}
.container .website .top_bar .menu_button {
width: 3.2em;
height: 2.5em;
background: red;
border: 0px;
}
nav.menu {
width: 15em;
position: absolute;
left: 1em;
top: 3em;
background: yellow;
}