Display Problem with adding <hr> dynamically in Chrome

I'm working on an Asp.Net MVC3 application where the layout is based on the 960 Grid Layout.

To make my life easier while creating edit forms. This is a div based layout system.

There a are couple of fixup things that I'm doing automatically in javascript client side so that I don't have to hard code them in every edit. Form. First, is the <div class="clear"></div> that has to be added after each line to reset the formatting.

My second problem, is that I have to increase the vertical spacing about 1/2 line height between each row. But as each row is a div, I've found out that you cannot just increase the vertical margin between the divs. Current CSS spec's won't let you. So, I'm dynamically adding a <hr/> tag before the start of each row's div. Other possible DOM element for insertion give me the same effect. For IE9 & FF5 this is working correctly. However, form Chrome 12, I'm getting

When I look at the HTML in the DOM, the <hr /> tag is inserted before the <div class="editor-row"&开发者_StackOverflow社区gt; tag for each row.

I have a demo version at jsFiddle Example. Note on the demo version - The controls for each line (a label and an edit field) display as a single line in Chrome and on two lines in FF and IE. This is an issue with the limited css I've pasted into jsfiddle. It has no impact on the problem I'm trying to fix here.

Add float:left to each one of the editor-row divs.

I would just use block instead of table-row in the display property fo the editor-row class as seen in this jsFiddle