Two fixed sidebars [closed]
I'm trying to implement a simple interface with 2 fixed sidebars on both sides. Below is what I got so far, but sidebar-right is not on the right, how can I fix it? And how can I hide sidebar-right (display: none) when screen is <1200px ?
html,
body {
width: 100%;
height: 100%;
}
.wrapper {
display: flex;
height: 100%;
}
.sidebar-left {
position: fixed;
width: 250px;
height: 100%;
background-color: blue;
}
.sidebar-right {
transition: all 1s;
width: 350px;
height: 100%;
background-color: blue;
}
.content {
width: calc(100% - 600px);
background-color: white;
margin-left: 250px;
}
@media (max-width: 1200px) {
.sidebar-right {
display: none;
}
.content {
width: calc(100% - 250px);
}
}<div class="wrapper">
<div class="sidebar-left">
<p>a</p>
</div>
<div class="content">
<p>
Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem
<br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem
<br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>Lorem <br>
</p>
</div>
<div class="sidebar-right">
<p>a</p>
</div>
</div>Modified Answer
.main {
width: 80%;
height: 200px;
margin: auto;
padding: 10px;
}
.sidebar-left {
float: left;
width: 200px;
height: 100%;
background-color: blue;
}
.content {
float: left;
width: 200px;
height: 100%;
background-color: green;
}
.sidebar-right {
float: left;
width: 200px;
height: 100%;
background-color: yellow;
}
Use your HTML code along with these classes.