Menu
I have been trying to make a simple HTML layout with a sidebar on the left and a container at it's right. The CSS Codes i wrote are these:
body{
margin: 0;
padding:0;
}
.sidebar,.content{
background: #333;
color: #fff;
height: 500px;
border-radius: 4px;
margin: 20px;
border:1px solid #777;
}
.sidebar{
width: 300px;
float: left;
position: absolute;
}
.content{
width: 630px;
}
And the simple HTML Follows:
<body>
<div class="sidebar"> </div>
<div class="content"> </div>
</body>
But It doesn't seem to work though i thought using float:left solves the problem, but it seems that the right one is going on top of another.
JSFiddle: Click here to see the JS Fiddle
274
A modern and elegant solution to this would be to use CSS Grid.
.container {
width: 100%;
display: grid;
grid-template-areas: "sidebar main";
grid-template-columns: 200px auto;
}
.sidebar {
grid-area: sidebar;
height: 100vw;
background-color: lightgray;
}
.main {
grid-area: main;
height: 100vw;
background-color: gray;
}<div class='container'>
<div class='sidebar'>
// sidebar content
</div>
<div class='main'>
// main page content goes here
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
