public
Created

Flexible layout using boxes

  • Download Gist
index.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
<!DOCTYPE html>
<html>
<head>
 
<style type="text/css">
body {width: 100%; height: 100%; margin: 0px; padding: 0px;}
#layout { background: yellow; display: -webkit-box; -webkit-box-orient: vertical; }
#main-container { background: red; display: -webkit-box; -webkit-box-flex: 1; }
#sidebar { background: green; -webkit-box-flex: 0; }
#map-canvas { background: black; -webkit-box-flex: 1; }
#footer { background: yellow; -webkit-box-flex: 0; height: 50px; }
</style>
 
</head>
 
<body>
<div id="layout">
<div id="main-container">
<div id="sidebar">
Sidebar
</div>
<div id="map-canvas"></div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.