6,010
edits
Changes
Jump to navigation
Jump to search
Line 1:
Line 1: − + − * {+ − 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; − <h2>Two Equal Columns</h2>+ − + − + − <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>
no edit summary
<style>
<style type="text/css">
#wrap {
width:600px;
margin:0 auto;
}
}
#left_col {
float:left;
width:300px;
}
}
#right_col {
float:right;
width:300px;
}
}
</style>
</style>
<div id="wrap">
<div id="left_col">
<div class="row">
...
</div>
<div id="right_col">
...
</div>
</div>
</div>
