Source code: <style> body { font: 600 14px/24px "Open Sans", "Verdana"' "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif; } h1 { color: #9799a7; font-size: 14px; font-weight: bold; margin-bottom: 6px; } .container:before, .container:after { content: ""; display: table; } .container:after { clear: both; } .container { background: #6699cc; margin-bottom: 24px; *zoom: 1; } .container-75 { width: 75%; } .container-50 { margin-bottom: 0; width: 50%; } .container, section, aside { border-radius: 6px; } section, aside { background: #33cccc; color: #fff; margin: 1.858736059%; padding: 20px 0; text-align: center; } section { float: left; width: 63.197026%; } aside { float: right; width: 29.3680297%; } </style> </head> <body> <h1>100% Container</h1> <div class = "container"> <section>Section</section> <aside>To the Side</aside> </div> <h1>50% Container</h1> <div class = "container container-75"> <section>Section</section> <aside>To the Side</aside> </div> <h1>25% Container</h1> <div class = "container container-50"> <section>Section</section> <aside>To the Side</aside> </style>
<style> body { font: 600 14px/24px "Open Sans", "Verdana"' "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif; } h1 { color: #9799a7; font-size: 14px; font-weight: bold; margin-bottom: 6px; } .container:before, .container:after { content: ""; display: table; } .container:after { clear: both; } .container { background: #6699cc; margin-bottom: 24px; *zoom: 1; } .container-75 { width: 75%; } .container-50 { margin-bottom: 0; width: 50%; } .container, section, aside { border-radius: 6px; } section, aside { background: #33cccc; color: #fff; margin: 1.858736059%; padding: 20px 0; text-align: center; } section { float: left; width: 63.197026%; } aside { float: right; width: 29.3680297%; } </style> </head> <body> <h1>100% Container</h1> <div class = "container"> <section>Section</section> <aside>To the Side</aside> </div> <h1>50% Container</h1> <div class = "container container-75"> <section>Section</section> <aside>To the Side</aside> </div> <h1>25% Container</h1> <div class = "container container-50"> <section>Section</section> <aside>To the Side</aside> </style>