3 Simple Responsive Sidebar Designs In HTML CSS

Basic responsive sidebar designs are not difficult, they just require some CSS flex magic.

(1) COLLAPSING SIDEBAR

(1A) THE HTML

<div id="main">MAIN</div>
<div id="side">SIDE</div>

Main content to the left, sidebar to the right.

(1B) THE CSS

/* (A) BIG SCREEN - 2 COLUMNS LAYOUT */
body {
  display: flex;
  padding: 0; margin: 0;
  min-height: 100vh; /* optional */
}
#main { flex-grow: 1 …

basic beginners big css designs flex html magic padding responsive sidebar simple webdev