Created
May 14, 2015 18:28
-
-
Save zleight1/3a4d51c7ed587520177c to your computer and use it in GitHub Desktop.
Floating Example
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
| <html> | |
| <head> | |
| <style> | |
| .red { | |
| background-color: red; | |
| } | |
| .blue { | |
| background-color: blue; | |
| } | |
| div { | |
| display: block; | |
| margin: 10px; | |
| min-height: 50px; | |
| } | |
| .container { | |
| margin: 0 auto; | |
| width: 100%; | |
| padding: 3%; | |
| } | |
| .full { | |
| width: 90%; | |
| clear: both; | |
| } | |
| .half { | |
| width: 45%; | |
| float: left; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="full red"></div> | |
| <div class="half red"></div> | |
| <div class="half blue"></div> | |
| <div class="full blue"></div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks this is exactly what I was looking for. Looks like the width percentages and flow is what controls the row each div is on. Breaking the float after each longer one and allowing the shorter ones to stack one after the other on the row