Difference between revisions of "M365/test1"
< M365
Jump to navigation
Jump to search
| Line 1: | Line 1: | ||
{{#CSS: | {{#CSS: | ||
| + | |||
<meta name="viewport" content="width=device-width, initial-scale=1"> | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<style> | <style> | ||
| Line 6: | Line 7: | ||
} | } | ||
| − | /* Create two | + | /* Create two unequal columns that floats next to each other */ |
.column { | .column { | ||
float: left; | float: left; | ||
| − | |||
padding: 10px; | padding: 10px; | ||
height: 300px; /* Should be removed. Only for demonstration */ | height: 300px; /* Should be removed. Only for demonstration */ | ||
| + | } | ||
| + | |||
| + | .left { | ||
| + | width: 25%; | ||
| + | } | ||
| + | |||
| + | .right { | ||
| + | width: 75%; | ||
} | } | ||
| Line 19: | Line 27: | ||
display: table; | display: table; | ||
clear: both; | clear: both; | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
</style> | </style> | ||
}} | }} | ||
| − | <h2> | + | <h2>Two Unequal Columns</h2> |
| − | |||
<div class="row"> | <div class="row"> | ||
| − | <div class="column" style="background-color:#aaa;"> | + | <div class="column left" style="background-color:#aaa;"> |
<h2>Column 1</h2> | <h2>Column 1</h2> | ||
<p>Some text..</p> | <p>Some text..</p> | ||
</div> | </div> | ||
| − | <div class="column" style="background-color:#bbb;"> | + | <div class="column right" style="background-color:#bbb;"> |
<h2>Column 2</h2> | <h2>Column 2</h2> | ||
<p>Some text..</p> | <p>Some text..</p> | ||
</div> | </div> | ||
</div> | </div> | ||
Revision as of 21:25, 4 March 2023
Two Unequal Columns
Column 1
Some text..
Column 2
Some text..
