Reputation: 25277
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.
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?
Upvotes: 0
Views: 811
Reputation: 16456
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.
Upvotes: 1