A really simple exercise that leverages the long-awaited CSS3’s Flexible Box Model to create a sidebar. The sidebar takes the rightmost part of the view, while the main content is nicely centered inside the leftmost area. There are no pixel/percentage widths nor Javascript magic. Try to resize your browser’s window (or rotate your mobile device) to see it working (you may need to open this example in its own window - just click “full page” if you are on WebVis, or “Open in a new window” if you are on bl.ocks.org).
You can check the tables on caniuse.com to see the current support for flexbox.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="CSS3 Flexbox - Sidebar" />
<title>CSS3 Flexbox - Sidebar</title>
<link rel="stylesheet" href="index.css">
<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
<div id="main">
<div>Some content</div>
<div>More content</div>
</div>
<div id="side">Side content</div>
</body>
</html>
html, body {
padding: 0;
margin: 0;
background: white;
font-family: sans-serif;
}
body {
background: rgba(0,0,40,0.3);
}
#main {
padding: 12px;
}
#main > *:not(:last-child) {
margin-bottom: 12px;
}
#main > * {
border: 1px solid #333;
padding: 4px;
text-align: center;
width: 200px;
}
#side {
background: rgba(40,40,0,0.5);
padding: 12px;
color: #DDD;
}
/* relevant section */
body {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-ms-flex-flow: row;
-webkit-flex-flow: row;
flex-flow: row;
}
#main {
margin-left: auto;
margin-right: auto;
}