Skip to content

Instantly share code, notes, and snippets.

@mayeenulislam

mayeenulislam/content-sidebar-sidebar.css

Created December 23, 2014 11:43
Show Gist options
  • Save mayeenulislam/be2f21d6961ccc55441e to your computer and use it in GitHub Desktop.
Save mayeenulislam/be2f21d6961ccc55441e to your computer and use it in GitHub Desktop.
Download ZIP
A responsive approach to 3 column layout with 2 sidebars in different formation
Raw
content-sidebar-sidebar.css
/* Aesthetics */
.container{
width: 100%;
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
/* Debugging */
#content,
aside{
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;
}
/* Real One: CONTENT + SIDBEAR + SIDEBAR */
#content{
float: left;
width: 60%;
}
#left-sidebar{
float: left;
width: 20%;
}
#right-sidebar{
float: right;
width: 20%;
}
@media (max-width: 728px){
#content,
.body-wrapper,
#left-sidebar,
#right-sidebar{
clear: both;
float: left;
width: 100%;
}
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Two Sidebar Layout - HTML and CSS</title>
<link rel="stylesheet" href="sidebar-content-sidebar.css"> <!-- disable/enable to test -->
<!-- <link rel="stylesheet" href="content-sidebar-sidebar.css"> --> <!-- disable/enable to test -->
</head>
<body>
<div class="container">
<div class="body-wrapper">
<div id="content">CONTENT</div>
<aside id="left-sidebar">LEFT</aside>
</div>
<!-- /.body-wrapper -->
<aside id="right-sidebar">RIGHT</aside>
</div>
</body>
</html>
Raw
sidebar-content-sidebar.css
/* Aesthetics */
.container{
width: 100%;
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
/* Debugging */
#content,
aside{
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;
}
.body-wrapper{
background-color: yellow;
}
/* Real One: SIDBEAR + CONTENT + SIDEBAR */
.body-wrapper{
float: left;
width: 80%;
}
.body-wrapper:after{
content: "";
display: block;
clear: both;
}
#left-sidebar{
float: left;
width: 20%;
}
#content{
float: right;
width: 80%;
}
#right-sidebar{
float: right;
width: 20%;
}
@media (max-width: 728px){
#content,
.body-wrapper,
#left-sidebar,
#right-sidebar{
clear: both;
float: left;
width: 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment