6,010
edits
Changes
Jump to navigation
Jump to search
Line 1:
Line 1: − + − <p>I have updated this example to show a great way of getting a two column layout.</p>+ − </div>+ − <div class="right">+ − <ul> + − <li>The columns are in the right order semantically</li>+ − <li>You don't have to float both columns</li>+ − <li>You don't get any odd wrapping behaviour</li> − <li>The columns are fluid to the available page...</li> − <li>They don't have to be fluid to the available page - but any container!</li> − </ul> − </div> − + − float: left; + − width: 50%; + − + − margin-left: 50%; + + + + + + + + +
no edit summary
<div class="left">
<style type="text/css">
.flexbox {
display: -ms-flex;
display: -webkit-flex;
display: flex;
width: 100%;
}
.left {
.left {
background-color: Red;
background: #a0ffa0;
min-width: 75px;
flex-grow: 0;
}
}
.right {
.right {
background-color: Aqua;
background: #a0a0ff;
flex-grow: 1;
}
}
</style>
...
<div class="flexbox">
<div class="left">AAA</div>
<div class="right">BBB</div>
</div>
{{M365}}
{{M365}}
