I have some HTML which looks like this:
<body>
<div id="panel1" class="panel"> Panel 1 </div>
<div id="panel2" class="panel"> Panel 2 </div>
<div id="panel3" class="panel"> Panel 3 </div>
<div id="panel4" class="panel"> Panel 4 </div>
<div id="panel5" class="panel"> Panel 5 </div>
<div id="panel6" class="panel"> Panel 6 </div>
<div id="panel7" class="panel"> Panel 7 </div>
<div id="contentheader"> Header </div>
<div id="content"> Content </div>
</body>
What I would like is for some of the panels (let's say 1-4) to be floated on the left, the others (5-7) to be floated on the right and the header and content in between, ideally without having to wrap the left and right panels in a wrapper div.