I've got a similar oddity at:
if you go to the 'meet the author' page, the right navigation div 'drops' (the content has a float:left on it).
oddly, all the subpages use the same layout HTML/CSS (it's a content management system). The only difference i can think of is this page's use of the unordered list. but i tried tightening up its margin, width, etc. but to no avail.

safari 1.2.4 (v125.12), OS X 10.3.8

jules said on February 23, 2005

p.s. (re: comment above, at joanboswell.ca), works in firefox (mac/pc), ie 5 (mac/pc) & 6 (pc)

said on February 23, 2005

"Meet the Author" looks fine to me in Safari 1.3 (v168), as it does in Firefox. Unless I'm not looking at the right thing, this is probably a WebKit bug that Apple has fixed.

Ben Kennedy said on February 23, 2005

I don't know why my name is disppearing from my comment... weird.

jules said on February 23, 2005

well damn, that's kinda good to know... but seems like safari 1.3 has been 'nearing release' for almost a year!
thanks for looking. appreciated

Ben Kennedy said on February 23, 2005

Talking of floats and divs, you types may be interested in peeking at Dave Hyatt's Safari dev blog at http://weblogs.mozillazine.org/hyatt/. He hasn't been updating it very frequently as of late, but the most recent entry (from a month and a half ago) illuminates some of the issues they've been facing in developing the WebKit in a standards-compliant yet real-world-functional way.

dotjay said on March 12, 2005

I've been getting a similar bug in Netscape 6. Relatively absolute positioning just doesn't work, sending bits all over the place! As with you, I tried putting position:relative in outer containers and adding in extra containers, but nothing seems to work. Grrr...

GlennG said on March 03, 2006

The problem is sort of still there. It's not the original problem, but a subtle difference.

If you view the page using Safari 2.0.3 (on OSX 10.4.5, the 'float' touches the 'Main Div' - i.e. the float's not properly positioned.

Now having to work around this for a client's site.


Stuart Cruickshank said on October 23, 2006

Hmmmm...this thread is a little old now, but I'm currently experiencing this problem in Safari v2.0.4, Mac OSX 10.4.7.

Has anyone come up with a solution?


revisiond said on November 20, 2006

Try adding clear:both to the child. Worked for me. Although all my parents were positioned relatively.

bloha said on January 24, 2007

yuk, I just use a table around the div... loads just as fast nowadays... what the whole deal about this div thing what's wrong with tables... anyone got any idea?

Chuck Davis said on August 03, 2007

It is actually unfortunate that we haven't reached a point where we have a rock solid consistent implementation of display of browser content. Sometimes I feel like Microsoft should be allowed to dominate the market and gobble up all the other browsers. That way, we could progress faster into the future and move on to other challenges.

Andreas said on August 09, 2007

A related problem occurs with floating blocks in a parent block (non-floating or floating): The parent block won't expand in height to fit the floats. Possible solutions include:
- inserting an element with clear:both after the last float (requires touching your HTML, and we don't want that now, do we),
- stating height:1% (don't ask me what this fixes exactly, I just read this somewhere),
- stating overflow:hidden (don't ask me why this works, but it does)

Here's an example for the several-floats-in-div-problem:

<title>Safari Float-In-Block-Element Problem</title>
<style type="text/css">
div { border:1px solid green; }
.floater { float:left; border-color:yellow;}
<div class="floater">floating div 1</div>
<div class="floater">floating div 2</div>
<div class="floater">floating div 3</div>

You fix this by changing div's style to:

div { border:1px solid green; overflow:hidden}

As I said, i have no clue why this works. I'm on Safari 2.04.

Scott Lenger said on October 03, 2007

I rarely encounter Safari bugs but this one was driving me mad!! clear:both worked for me (thanks revisiond) on Safari 2.04 and 3.02 (on vista)

Janene said on September 11, 2008

I had the same issue with Safari.

I found that if your 'main column div' and 'side column div' widths don't add up to '100%' it doesn't appear correctly in Safari, but adjusting these fixed my problem.

<u>Example (CSS):</u>
#MainCol {width: 75%; float: left;}
#Sidebar {width: 25%; float: right;}

I'm no expert, but hope this will perhaps be of use to someone...

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.