Created
September 1, 2017 12:51
-
-
Save AlanSimpsonMe/f337d24cc9be2c49a588499247181f44 to your computer and use it in GitHub Desktop.
Simple equal-height columns
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Equal-Height Columns Example</title> | |
| <style> | |
| .columns { | |
| display: table; | |
| width: 90%; | |
| border: solid 1px gray; | |
| margin: 0 auto; | |
| } | |
| .columns nav { | |
| display: table-cell; | |
| vertical-align: top; | |
| width: 20%; | |
| padding:0; | |
| background: #ddd; | |
| } | |
| .columns article { | |
| display: table-cell; | |
| padding: 10px; | |
| border-right: solid 1px gray; | |
| } | |
| .columns article h1{ | |
| margin:0; | |
| } | |
| .columns nav a { | |
| display: block; | |
| border-bottom: solid 1px gray; | |
| padding: 8px 0; | |
| text-align: center; | |
| text-decoration: none; | |
| color: gray; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Both columns go in this div --> | |
| <div class="columns"> | |
| <!-- Main column left --> | |
| <article> | |
| <h1>Main article text goes here.</h1> | |
| </article> | |
| <!-- Navigation pane right --> | |
| <nav> | |
| <a href="#">Page 1</a> | |
| <a href="#">Page 2</a> | |
| <a href="#">Page 3</a> | |
| <a href="#">Page 4</a> | |
| </nav> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment