Responsive design and clearfix

Question

I have this responsive layout for a page. The <aside> is with constant width and the .main area has a margin-right. I do this because I want the .main area to adapt to different devices, while the <aside> remains constant.

http://jsfiddle.net/c6mZN/1/

The problem, as you can see, is that I have inside the main area a list of object that also use the clearfix, and the first element clears the object all the way until the end of the sidebar. What I want is that it looks exactly like the rest of .block

How could I achieve this?

Answer 1

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.