Safari bug? Float, float, relative, absolute.

I got this working in every single browser except Safari. I have a div positioned absolutely within a div positioned relatively and floated within a floated div. I've nicknamed it the "Safari Float-Float Bug" but only because it sounds cool.

I've put together an example that demonstrates the wierd behaviour (you'll need Safari to see the effects).

I don't have a solution as of yet except to avoid this specific combination. Feel free to offer any additional insight.

Update: Looks like it's a version thing. At work, we have a machine with version 1.0.3. I got someone to look at it with 1.2.4 and it is rendering correctly.

Update: Seems to apply to Netscape 6 through 7.1, as well. Setting the float on the container div creates layout issues similar to Safari. At this point, I'm using a table (*gasp*) to create some consistency in layout.

Published February 14, 2005 · Updated September 17, 2005
Categorized as HTML and CSS
Short URL: https://snook.ca/s/335

Conversation

21 Comments · RSS feed
Wesley Walser said on February 14, 2005

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.

Roger Johansson said on February 14, 2005

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.

Mikael Gyth said on February 15, 2005

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

Jonathan Snook said on February 15, 2005

Now that's bizarre, Mikael. In Opera 7.5 I'm definitely running into some odd rendering issues. It sometimes only shows half the red box and it's completely misplaced. What's even wierder is that the site I'm putting together using this technique renders perfectly.

Applying position:relative to the outermost div came closer to resolving the issue in Opera.

Ben Kennedy said on February 15, 2005

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.

Jonathan Snook said on February 15, 2005

Ben: to clarify, the example isn't necessarily the "correct" behaviour but certainly closer to what was expected compared to what I was running into with Safari 1.0.3 where the image was appearing outside of its containing div altogether.

jules said on February 23, 2005

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

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

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.

Glenn

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?

Cheers

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:


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

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.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.