Live
x
<aside> The block is 300px high. It's a page sidebar</aside><main class="pad-30 color-w"> The main content of the site. The biggest issue is that it may be shorter in height than our sidebar, which means the footer will be to the right of the sidebar as well.</main><div class="clear"></div><footer class="pad-30 color-w"> Site footer</footer>
Live
xxxxxxxxxx40
body { font: 18px/1.5 sans-serif;}.pad-30 { padding: 30px;}.color-w { color: white;}.clear { clear: both;}aside { height: 300px; width: 30%; padding: 20px 10px; box-sizing: border-box; background: #3F51B5; color: #fff; float: left;}main { background: #2196F3; width: 70%; height: 300px; box-sizing: border-box; float: left;}footer { background: #9C27B0;}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.