Created
January 27, 2015 06:36
-
-
Save nyteshade/462a2602b82b7930d963 to your computer and use it in GitHub Desktop.
How to do side by side elements, with vertical alignment, without floats
This file contains 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
| div.left-right { | |
| box-sizing: border-box; | |
| display: inline-block; | |
| font-size: 0; | |
| position: relative; | |
| white-space: nowrap; | |
| width: 100%; | |
| } | |
| div.left-right div.left, | |
| div.left-right div.right { | |
| box-sizing: border-box; | |
| display: inline-block; | |
| font-size: initial; | |
| position: relative; | |
| white-space: normal; | |
| width: 50%; | |
| vertical-align: top; | |
| } | |
| div.left-right.vmiddle div.left, | |
| div.left-right.vmiddle div.right { | |
| vertical-align: middle; | |
| } | |
| div.left-right.vbottom div.left, | |
| div.left-right.vbottom div.right { | |
| vertical-align: bottom; | |
| } | |
| div.left-right div.left { | |
| background: firebrick; | |
| text-align: left; | |
| } | |
| div.left-right div.right { | |
| background: forestgreen; | |
| text-align: right; | |
| } |
This file contains 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> | |
| <meta name="description" content="This shows how to do left-right alignment without using floats in a way that both fits into parent containers as well as can be vertically aligned to it's left and right components." /> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="side_by_side.css"> | |
| <title>Floatless Alignment</title> | |
| </head> | |
| <body> | |
| <div class="left-right"> | |
| <div class="left"> | |
| <p>Paragraph 1</p> | |
| </div> | |
| <div class="right"> | |
| <p>Paragraph 1</p> | |
| <p>Paragraph 2</p> | |
| </div> | |
| </div> | |
| <hr/> | |
| <div class="left-right vmiddle"> | |
| <div class="left"> | |
| <p>Paragraph 1</p> | |
| </div> | |
| <div class="right"> | |
| <p>Paragraph 1</p> | |
| <p>Paragraph 2</p> | |
| </div> | |
| </div> | |
| <hr/> | |
| <div class="left-right vbottom"> | |
| <div class="left"> | |
| <p>Paragraph 1</p> | |
| </div> | |
| <div class="right"> | |
| <p>Paragraph 1</p> | |
| <p>Paragraph 2</p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment