Forced wrapping of floated divs with CSS - html

Question

I'm working with OpenLayers mapping. OpenLayers draws maps on a webpage, and has a mechanism for placing UI controls on those maps. One of its controls is the Panel control, which contains some number of button controls.
A Panel control is rendered as a div, with a bunch of child divs within it - one for for each button. The appearance of the Panel control, and of all of the button controls, is configured with CSS. My problem is with how to write the CSS to get what I want. (Note, I can't change the rendered html without hacking at the OpenLayers sourcecode, which I'd rather avoid.)
So I've put together a sample of the kind of html I need to work with, here
I want the buttons to be laid out horizontally, from left to right, at the top right of the map. I can do that with float:right, and position:absolute.
I want the buttons to be laid out on multiple lines. If I add a width: to the panel, the child button divs will wrap. But I don't want over-flow wrapping, I want to wrap between specific buttons. And I can't figure out how to do that in css.
If you take my example, for example, I can cause it to put the first five buttons on the first line, and the last two on the second, by change the width. But suppose I wanted to put the first three buttons on the first line, and the last four on the second. If I set the width so that the buttons wrapped after the third, I'd get the seventh button on a third line, which I don't want.
Using set-width and automatic wrapping to position the child buttons always puts the same number of child buttons on every line, with the last line possibly short. That's not what I need.
Thinking about it, I could use position:absolute on every button, but that starts to seem very tedious. Anyone have a simpler approach?

Answer 1

If you can alter the CSS of a specific element, you could just set clear: right:
<div id='contents'>
<div id='panel'>
<div id='button1'>1</div>
<div id='button2'>2</div>
<div id='button3'>3</div>
<div id='button4' style='clear: right'>4</div>
<div id='button5'>5</div>
<div id='button6'>6</div>
<div id='button7'>7</div>
</div>
</div>
You could alternatively insert a clearing element between the buttons:
<div id='contents'>
<div id='panel'>
<div id='button1'>1</div>
<div id='button2'>2</div>
<div id='button3'>3</div>
<br style='clear: right' />
<div id='button4'>4</div>
<div id='button5'>5</div>
<div id='button6'>6</div>
<div id='button7'>7</div>
</div>
</div>