CSS not positioning properly - Safari

I've a web page that has two divs, one on the left, one on the right. I've got these positioned using float: left/right;

All is well in FireFox, IE (including IE6!!!) and Chrome. But for some reason in Safari, the right hand div is turning up underneath the left hand div. So, I put a border around the divs and i notice that in Safari only, the right hand div thinks it's part of the other div. I've checked the page for divs and closing divs and all looks good.

I'm also a bit confused as to why it works in Chrome but not Safari. Are these two browsers both Webkit browsers??

All help appreciated

The "most universally accepted" method to do most left/right divs is to float both divs left, clearing the float immediately after. The easiest way to clear is to add a div immediately after the two divs with the following:

<div style="clear:both"></div>

That will ensure that anything after the floated elements is not getting bumped around by the float properties, which will cascade throughout until they are closed.

Now, some browsers have issues with margins/padding (mostly IE). Temporarily assign a background (if there already isn't one) and a width that's smaller than you'd expect to need it--i.e. if you wanted two divs that are both 50% of the screen, assign both a 48% width for testing purposes. Now, does that solve the problem? If so, Safari might be reacting negatively to the floats/margins set on those divs. Tweak the margins and padding, rinse, repeat.

Main content floated divs can get to be a mess in a hurry, especially if you're trying to go 100% of a parent or the screen in general. You can easily get by this with a css reset or my personal favorite, a grid system like 960.gs Otherwise, you're left to do arbitrary tweaking that either a) looks good only in --most-- browsers or b) uses painful browser-specific stylesheets. No thanks on either!

Try this, It will fix your problem

.container{ clear:both}
.container .label-info {  float:right; position:relative; min-width:100px;}
.container label {  float:left;}

<div class="container">
  <div class="label-info">Right side</div>
  <label>My Label</label>
</div>

Relating to the answer above (by bpeterson76)

Mine got fixed by adding to the parent HTML tag which contains the float as:

style="width: 100%;"

I know this might be an old question, but i face this issue today as well.

Hope that helps someone.