| Line 1: |
Line 1: |
| − | <style> | + | <style type="text/css"> |
| − | * {
| + | #wrap { |
| − | box-sizing: border-box;
| + | width:600px; |
| | + | margin:0 auto; |
| | } | | } |
| − | | + | #left_col { |
| − | /* Create two equal columns that floats next to each other */
| + | float:left; |
| − | .column {
| + | width:300px; |
| − | float: left;
| |
| − | width: 50%;
| |
| − | padding: 10px;
| |
| − | height: 300px; /* Should be removed. Only for demonstration */
| |
| | } | | } |
| − | | + | #right_col { |
| − | /* Clear floats after the columns */
| + | float:right; |
| − | .row:after {
| + | width:300px; |
| − | content: "";
| |
| − | display: table;
| |
| − | clear: both;
| |
| | } | | } |
| | </style> | | </style> |
| | | | |
| − | <h2>Two Equal Columns</h2>
| + | <div id="wrap"> |
| − | | + | |
| − | <div class="row"> | + | ... |
| − | <div class="column" style=" background-color:#aaa;"> | + | </div> |
| − | <h2>Column 1</h2>
| + | |
| − | <p>Some text..</p>
| + | ... |
| − | </div>
| + | </div> |
| − | <div class=" column" style="background-color:#bbb;"> | |
| − | <h2>Column 2</h2>
| |
| − | <p>Some text..</p>
| |
| − | </div>
| |
| | </div> | | </div> |
| | | | |