<p>I have a site I made really fast that uses floats to display different sections of content. The floated content and the content that has an additional margin both appear fine in FF/IE, but on safari one of the divs is completely hidden. I've tried switching to <code>padding</code> and <code>position:relative</code>, but nothing has worked for me. If I take out the code to display it to the right it shows up again but under the floated content.</p>

<p>The main section of css that seems to be causing the problem is:</p>

<pre class="lang-css prettyprint-override"><code>#settings{
    float:left;
}

#right_content{
    margin-top:20px;
    margin-left:440px;
    width:400px;
}
</code></pre>

<p>This gives me the same result whether I specify a size to the #settings div or not. Any ideas would be appreciated.</p>

<p>The site is available at: <a href="http://frickinsweet.com/tools/Theme.mvc.aspx" rel="nofollow noreferrer">http://frickinsweet.com/tools/Theme.mvc.aspx</a> to see the source code.</p>

[{'answer_id': 50302, 'author': 'Mike H', 'author_id': 4563, 'author_profile': 'https://Stackoverflow.com/users/4563', 'pm_score': 1, 'selected': False, 'text': '<p>Have you tried floating the #right_content div to the right?</p>\n\n<pre class="lang-css prettyprint-override"><code>#right_content{\n  float: right;\n  margin-top: 20px;\n  width: 400px;\n}\n</code></pre>\n'}, {'answer_id': 50307, 'author': 'Ryan Lanciaux', 'author_id': 1385358, 'author_profile': 'https://Stackoverflow.com/users/1385358', 'pm_score': 0, 'selected': False, 'text': '<p>Sorry I should have mentioned that as well. I tried floating that content right and additionally tried floating it left and setting the position with the thinking that both divs would start out at left:0 where setting the margin of the right would move it over.</p>\n\n<p>Thanks</p>\n'}, {'answer_id': 50309, 'author': 'Sören Kuklau', 'author_id': 1600, 'author_profile': 'https://Stackoverflow.com/users/1600', 'pm_score': 0, 'selected': False, 'text': '<p>A few things you should fix beforehand:</p>\n\n<ol>\n<li>Your <code>&lt;style&gt;</code> tag is in <code>&lt;body&gt;</code>, when it belongs in <code>&lt;head&gt;</code></li>\n<li><p>You have a typo "realtive" in one of your inline styles:</p>\n\n<pre><code>&lt;a href="http://feeds.feedburner.com/ryanlanciaux" style="position:realtive; top:-6px;"&gt;\n</code></pre></li>\n</ol>\n\n<p>Try to get your page to <a href="http://validator.w3.org/check?uri=http%3A%2F%2Ffrickinsweet.com%2Ftools%2FTheme.mvc.aspx" rel="nofollow noreferrer">validate</a>; this should make debugging the actual problems far easier.</p>\n'}, {'answer_id': 50336, 'author': 'Matthew M. Osborn', 'author_id': 5235, 'author_profile': 'https://Stackoverflow.com/users/5235', 'pm_score': 2, 'selected': True, 'text': '<p>I believe the error lies in the mark up that the color picker is generating.  I saved the page and removed that code for the color picker and it renders fine in IE/FF/SF.  </p>\n'}]
['https://Stackoverflow.com/questions/50280', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1385358/']