Forked your fiddle with fixed code.
Your .main
element needs to know it has a separate 'formatting context', such that its children can ignore the external layout flow: the only way to do this in standards-compliant browsers is with overflow: hidden
:
.main {
overflow: hidden;
}
Incidentally, you can then get rid of the margin on .main
and it will automatically occupy whatever space is left (so you can then change the width of aside
as you see fit, or even add extra columns) — I then gave the aside
margin-left: 10px
to dictate the gap it needs to keep your layout constant.