Skip to content

Instantly share code, notes, and snippets.

@fireflysemantics

fireflysemantics/index.html

Last active September 20, 2022 20:21
Show Gist options
  • Save fireflysemantics/91dbfd4d4bd449d5d5ebac972cfc5545 to your computer and use it in GitHub Desktop.
Save fireflysemantics/91dbfd4d4bd449d5d5ebac972cfc5545 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<!--
Need a visual blank slate?
Remove all code in `styles.css`!
-->
<style>
* {
box-sizing: border-box;
}
main,
html,
body {
height: 100vh;
margin: 0;
}
main {
display: flex;
}
#c1 {
background-color: yellow;
flex: 0 0 200px;
min-height: 100%; /* chrome needed it a question time , not anymore */
}
#c2 {
background-color: orange;
flex: 1 0 150px;
}
#c3 {
background-color: purple;
flex: 0 0 200px;
}
</style>
</head>
<body>
<main>
<div style="background-color: gray" id="c1">Column 1</div>
<div style="background-color: white" id="c2">Column 2</div>
<div style="background-color: gray" id="c3">Column 3</div>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment