tinyMCE editor doesnt look the same as output - css

Question

I am using tinyMCE editor, and I am using 2 same divs with float:right; in the CSS.
The issue I am having is that when I save the HTML, and open the saved content on any browser, it doesn't look the same as in the editor.
As an example I have attached 2 pictures, note there is a difference in the height of the blue boxes (in the editor and in the output).
Editor:
Output:
Here is the HTML in the editor:
<div class="sub-mw" div="">
1 <br />1<br />1<br />1<br />
<!--#*#TStem1#*#-->
<div id="enews">
<div class="enewstext">News</div>
</div>
<!--#*#TEtem1#*#-->
<br /><br /><br />
<!--#*#TStem1#*#-->
<div id="enews">
<div class="enewstext">News</div>
</div>
<!--#*#TEtem1#*#-->
1<br />1<br />1<br />1<br />1<br /><br />as<br />dasd
<br />asd<br />a<br />da
</div>
Also Here is the css used:
.enewstext {
color: #FFF;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
padding-top: 15px;
padding-bottom: 15px;
background: #0163b1;
width: 100%;
box-shadow: 0px 5px 0px #FFF;
text-indent: 20px;
}
#enews{
background:#3394e1;
width:18%;
height:300px;
float:right;
}
Edit 1:
In this scenario, tracing the issue, it is caused by the <br> tag. It has a smaller height in the tinymce editor than on chrome.
Any Idea on how to fix this ?