The example shows up differantly in firefox and ie6, and neither of them match the example screenshot width wise.

I am guessing the problem in safari is worse than that, but figured it was worth mentioning.

I have Safari 1.2.4, and it renders almost as expected. Firefox renders the example like your screenshot, with the floated div pushed down below the "Main Div" text line. Safari renders it in the very top right corner, which Firefox also does if you put the float before the text in the markup.

in opera the red box is not showing at all...

In Safari 1.3 (v168) it appears as Roger Johansson describes; that is, almost like your screenshot, except the float div is in the immediate upper-right and not a text-line's worth downward.

However, from my interpretation of the HTML/CSS in your source, this should be correct behaviour. Why do you expect the line break above the float div? The float attrib on the div is making it float to the right of its enclosing content, as opposed to a 'display: block' style which would expectedly give the line-break effect as in your screenshot.

great site, fellow canuck! just found this discussion via Google;
I've got a similar oddity at:
http://www.joanboswell.ca
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.
thoughts?

safari 1.2.4 (v125.12), OS X 10.3.8

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

"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.

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

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

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.

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

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.

Glenn

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?

Cheers

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

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?

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.

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:

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

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.

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)

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