Skip to content

Instantly share code, notes, and snippets.

@zivc

zivc/Three column layout with fixed width middle column

Created September 16, 2014 16:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zivc/fb5ffeb4e18b5b48ec53 to your computer and use it in GitHub Desktop.
Save zivc/fb5ffeb4e18b5b48ec53 to your computer and use it in GitHub Desktop.
Download ZIP
Three column layout with one column centered with a fixed size and the two other columns filling the empty voids.
Raw
Three column layout with fixed width middle column
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<style>
html,
body,
body>div {
height: 100%;
width: 100%;
}
body > div {
display: flex;
flex-direction: row;
}
div > div {
height: 100%;
flex: 1 auto 1;
}
div div: nth-child(1) {
background-color: red;
}
div div: nth-child(2) {
background-color: blue;
min-width: 1000px;
}
div div: nth-child(3) {
background-color: green;
}
</style>
<div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment