CSS alternating rowbased floating

Im not sure how exactly to call my problem, hence the cryptic title.

The situation I have is the following:

<div class="widget full">foobar</div><div class="widget half">left</div><div class="widget half">right</div><div class="widget half">left</div><div class="widget full">foobar</div><div class="widget full">foobar</div><div class="widget half">left</div><div class="widget half">right</div>

I let these widgets float left & right, based on the odd or even css:

#main > div.widget.full { display: block; width: 100%; }#main > div.widget.half { display: block; width: 49%; }#main > div.widget.half:nth-child(2n+1) { float: right; }

Works like a charm on the first 2 ‘half’ ones, yet the 2 after that obtain screwed over by the 3rd ‘half’. The last 2 are in ‘reversed order’. What I need is some sort of reset or other solution that will put the divs in the right place, regardless of what is between them.

If there is no CSS answer for this I can fix it generating them in PHP, yet CSS has my preference since its a style-issue.

Thanks in advance

Unfortunately, you will not able to achieve this via css only.

This selector:

#main > div.widget.half:nth-child(2n+1)

Will not look for 2n+1 occurrences of .widget.half children, yet instead will target only .widget.half elements that are children number 1, 3, 5, etc.