Line 1: |
Line 1: |
| + | <!DOCTYPE html> |
| + | <html> |
| + | <head> |
| + | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| + | <style> |
| + | * { |
| + | box-sizing: border-box; |
| + | } |
| + | |
| + | /* Create two equal columns that floats next to each other */ |
| + | .column { |
| + | float: left; |
| + | width: 50%; |
| + | padding: 10px; |
| + | height: 300px; /* Should be removed. Only for demonstration */ |
| + | } |
| + | |
| + | /* Clear floats after the columns */ |
| + | .row:after { |
| + | content: ""; |
| + | display: table; |
| + | clear: both; |
| + | } |
| + | </style> |
| + | </head> |
| + | <body> |
| + | |
| + | <h2>Two Equal Columns</h2> |
| + | |
| + | <div class="row"> |
| + | <div class="column" style="background-color:#aaa;"> |
| + | <h2>Column 1</h2> |
| + | <p>Some text..</p> |
| + | </div> |
| + | <div class="column" style="background-color:#bbb;"> |
| + | <h2>Column 2</h2> |
| + | <p>Some text..</p> |
| + | </div> |
| + | </div> |
| + | |
| + | </body> |
| + | </html> |
| + | |
| {{M365}} | | {{M365}} |
| | | |