CSS is not positioned correctly - Safari

Question

I have a webpage with two divs, one on the left, one on the right. At me these positions are located using float: left / right;

Everything is fine in FireFox, IE (including IE6 !!!) and Chrome. But for some reason in Safari, the right div div rises under the left hand div. So I put the border around the divs, and I notice that only in Safari does the right div consider it part of another div. I checked the page for divs and closing divs and everything looks fine.

I am also a bit confused why it works in Chrome, but not in Safari. Are these two browsers Webkit browsers?

All help appreciated

Answer 1

The “most universal method” that most left / right divs execute is to put both divs to the left, clearing the float right after. The easiest way to clean up is to add a div immediately after two sections with the following:

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

This ensures that something after the floating-point elements are not streamlined by the float properties, which will be cascaded everywhere until they are closed.

Some browsers now have margin / padding problems (mostly IE). Temporarily assign a background (if it is already gone) and a width that is less than what you expected from it - i.e. if you want the two divs to be 50% of the screen, set the width to 48% for testing purposes. Now, does this problem solve? If so, Safari may react negatively to the floats / fields set for these divs. Field and padding training, rinsing, repetition.

The main content posted on the div can become a mess in a hurry, especially if you are trying to switch 100% of the parent or the screen as a whole. You can easily get this with css reset or my personal favorite, a mesh system such as 960.gs Otherwise, you are left with an arbitrary setup: either a) looks good only in browsers, or b) uses painful style sheets specific to for the browser. No thanks on any!

Answer 2

Try it, 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>