views:

821

answers:

4

I have a site I made real 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 padding and position:relative 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

The main section of css that seems to be causing the problem is:

#settings{
    float:left;
}

#right_content{
    margin-top:20px;
    margin-left:440px;
    width:400px;
}

This gives me the same result whether I specify a size to the #settings div or not. Any ideas would be appreciated -- the site is available at: http://frickinsweet.com/tools/Theme.mvc.aspx to see the source code.

+1  A: 

Have you tried floating the #right_content div to the right?

#right_content{
  float: right;
  margin-top: 20px;
  width: 400px;
}
Mike H
A: 

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.

Thanks

Ryan Lanciaux
A: 

A few things you should fix beforehand:

  1. Your <style> tag is in <body>, when it belongs in <head>
  2. You have a typo "realtive" in one of your inline styles:

    <a href="http://feeds.feedburner.com/ryanlanciaux" style="position:realtive; top:-6px;">
    

Try to get your page to validate; this should make debugging the actual problems far easier.

Sören Kuklau
+1  A: 

Hello, 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.

Matthew M. Osborn
I should have tried that. Thank you.
Ryan Lanciaux