Clean DIV-ided code

Hi,
I’ve been looking for a plugin for the WP editor for a while that would allow for visual editing of DIV-elements, to create clean HTML code inside DIV-elements and be able to see a box in the visual editor around the HTML contained in the DIV-element and making the DIV-element editable with classes and id. Is there anything out there?

Example Code that should be visually editable:

<h2>Heading full width</h2>
<div class="columns-first-half">
<p>Contents of first columns</p>
...
<p>Contents of first columns</p>
</div>
<div class="columns-second-half">
<p>Content of second column</p>
</div>
<h2>Heading full width</h2>
<div class="columns-first-third">
<p><img… /></p>
</div>
<div class="columns-second-third">
<p>...</p>
</div>
<div class="columns-third-third">
<p>...</p>
</div>

I can’t use CSS-columns in this layout sadly. And it is about more than columns, but this looked like a good example HTML snippet.