I'm struggling to design a layout with two vertical menus flanking the main content section. Despite experimenting with different combinations of inline, relative, and fixed positions, I can't seem to make it work.
Here is the Fiddle link for reference: https://jsfiddle.net/g4vbampm/3/
The red and blue menu blocks should be positioned directly beside the green central section (setting position:fixed placed them at the left edge of the screen). They should remain fixed at the top of the screen and not move. The height of the green central section will be dynamic and change based on JavaScript code.
.app {
text-align: center;
}
.left {
background: red;
width: 150px;
height: 300px;
display: inline-block;
}
.center {
background: green;
width: 300px;
height: auto;
display: inline-block;
}
.right {
background: blue;
width: 150px;
height: 300px;
display: inline-block;
}<div class="app">
<div class="left">
menu1
<br/>menu2
<br/>menu3
<br/>
</div>
<div class="center">
CONTENT
<br/>a
<br/>a
<br/>a
<br/>a
<br/>a
<br/>a
<br/>a
<br/>a
<br/>a
<br/>a
<br/>a
<br/>a
<br/>a
<br/>a
<br/>a
<br/>a
<br/>a
<br/>a
<br/>a
<br/>a
<br/>a
<br/>a
<br/>a
<br/>
</div>
<div class="right">
menu1
<br/>menu2
<br/>menu3
<br/>
</div>
</div>