Problems with Float Property in Safari

Discussion in 'CSS' started by atticus1, Nov 19, 2007.

0
  1. #1
    I am having a problem floating an image in a div in safari. 

    
.centerBox {
width:368px;
border:5px solid #d4e6e8;
padding:7px;
margin-top:8px;
}

.centerBox img {
float:right;
margin:3px;
}

.centerBox h3 {
font-size:1.2em;
margin:0;
}
    Code (markup):
    Index File:
    
<div class="centerBox">
<img src="images/baby_small.jpg" />
<h3>News Story</h3>
"I can't believe its not butter!" is butter.  An anonymous cow went undercover and you won't believe what she found. The company...<br />
<strong><a href="#">It is butter!(read more)</a></strong>
</div>
    Code (markup):
    Instead of displaying in the <div> it drops down to the bottom of the page. I repeat the class "centerBox" several times and all the images drop down to the bottom of the page out of the <div>.

    When I remove the float property, the img stays in the <div>, but of course it does not display properly.

    It works fine in IE6 and 7.

    Thanks in advance
     
    atticus1, Nov 19, 2007 IP
  2. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #2
    How wide is the image? Also, can you please post a link to the page (or copy/paste the full HTML and CSS code here)?
     
    Dan Schulz, Nov 19, 2007 IP
  3. atticus1

    atticus1 Peon

    Messages:
    29
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Fortunately, I did get it working in safari and mozilla. It was really odd how I had to do it though. I basically had to create a new element and float it to the right with a margin-top:-600px to get it into position. Amazingly, it worked perferct for mozilla, safari and almost perfectly for IE7. Anyway, I know there is a better way to use the float function, maybe you can see a better way.

    Thanks

    http://mywebtronics.com/carla/index.html
     
    atticus1, Nov 20, 2007 IP