Internet Explorer 6 and 7: floated elements expand to 100% width when they contain a child element floated right. Is there a workaround?

Here's a solution which makes inline-block work on IE6 as at foohack.com/2007/11/cross-browser-suppor... to make the elements behave more like right-floated div>s.

Up vote 22 down vote favorite 8 share g+ share fb share tw.

I've got a parent div floated left, with two child divs that I need to float right. The parent div should (if I understand the spec correctly) be as wide as needed to contain the child divs, and this is how it behaves in Firefox et al. In IE, the parent div expands to 100% width.

This seems to be an issue with floated elements that have children floated right. Test page: Float test Tester 1 Tester 2 Unfortunately I can't fix the width of the child divs, so I can't set a fixed width on the parent. Is there a CSS-only workaround to make the parent div as wide as the child divs? css internet-explorer float link|improve this question edited May 12 '09 at 10:46 asked May 12 '09 at 10:19Paul D.

Waite17.6k63781 92% accept rate.

2 here's a very good example of what the issue is: css-class.com/test/css/visformatting/flo... – Steve Perks May 12 '09 at 18:36 Ooh yes, good test page. – Paul D. Waite May 12 '09 at 20:35.

Here's a solution which makes inline-block work on IE6 as at foohack.com/2007/11/cross-browser-suppor... to make the elements behave more like right-floated s: Float with inline-block test Tester 1 Tester 2.

Aha! Yes, very good idea: inline-block is a closer imitation of the floats. We’re still left with the ordering problem, but unless we’re missing something, there’s no non-JavaScript way around that.

Winner! – Paul D. Waite May 4 '10 at 15:28 Oh — also I use conditional comments so that the code for fixing IE 7 and 6 only gets applied in IE 7 and 6.

I’ve rewritten your example accordingly. This avoids issues with inline-block in Firefox 2, and means that all IEs after 7 get the proper float-based code. – Paul D.

Waite May 4 '10 at 15:36 Fair enough - I tried to add float: right to the test DIVs and inline-block to the container but that didn't work in IE6 - it seems that right floating made the elements 100% width no matter what. Oh well, at least the effect is possible anyway :-P – cryo May 4 '10 at 16:19.

I came up with a solution using text-align: right and display: inline. Try this: Tester 2 Tester 1 Notice I had to switch the order of the "tester" boxes in the markup to show up in the same way as your example. I think there is an alternative that margin-top on the new container, but I don't have time looking into right now.

If you want cleaner styling for all other browsers try this: Tester 2 Tester 1 There are some different issues that can come up when you want to layout stuff around those boxes. However, I think those issues will be much easier to solve than this one. Hope this was helpful for you.

You might want to use inline-block instead of inline. – Casey Chu May 2 '10 at 18:10 2 inline-block does not work in ie6 – meo May 3 '10 at 9:09 3 @meo: no, it doesn't, but it can be emulated with a few caveats: foohack.com/2007/11/… – cryo May 4 '10 at 12:48 Good stuff. The ordering thing is unfortunate, but there’s no way around that.

There’s a solution below that gets inline-block working in IE 7 and 6, which better imitates the floated original, but credit is due here as well. – Paul D. Waite May 4 '10 at 15:27 @David M.

+1 for the link, thank you! – meo May 4 '10 at 17:33.

I did not alter the style of the divs, I only added the IDs main, sub1, and sub2 to your divs. var myWidth = document. GetElementById('sub1'). OffsetWidth + document.

GetElementById('sub2'). OffsetWidth; document. GetElementById('main').style.

Width = myWidth.

Sure, that should work JavaScript-wise—although, if I was going down the JavaScript route, I’d probably check whether Dean Edwards’ IE7 script fixed this particular issue (it fixes a bunch of others). – Paul D. Waite May 12 '09 at 16:28.

I had the same problem and solved in by positioning the child element (which I wanted to float right) with position:absolute and right:0. I gave the parent element enough right padding to make room for the child element... Worth a shot, might not work for all applications!

Sure, that’s another workaround. Works well if you know how wide the child element will be. – Paul D.

Waite Apr 2 at 14:57.

It may need some more work to have everything aligned properly, but the table doesn't expand.

Unfortunately, the table seems to force the child divs to wrap, so they're above each other instead of side to side. – Paul D. Waite May 12 '09 at 11:30 OK, how about nested tables?

The outer table has float:left and one cell. In that cell there is an inner table with float:right and two cells. In each of the two cells is the content of your two inner divs. It's more involved than just the divs, but it works (on my XP/IE7, at least).

– Oz. May 12 '09 at 12:40 Ah, achieve the horizontal layout of the child divs with a table. Definitely a possibility, although technically you're not meant to use tables for layout (I think you fail a Web Content Accessibility Guideline if you do).

Also, this is actually for a site that has two layouts: one left-to-right, and one right-to-left. Ideally we don't want to amend the HTML for the layouts (beyond having a class indicating which layout is in use), and using tables would put an end to that. – Paul D.

Waite May 12 '09 at 14:34.

Something you could start with is this: Tester 1 Tester 2 The result of that seems to be at least in the ballpark of what you're looking for. Obviously, you'd want to tweak it for your needs, and probably add some css logic to only apply it to browser.

Unfortunately that doesn’t seem to work on my test page: the child divs wrap, so they're above each other instead of side to side. Also, at least in IE 7, the 100% margin takes up all the available space, so the parent div is positioned outside of its parent. – Paul D.

Waite May 14 '09 at 9:17 whats with the caps? – David Murdoch May 3 '10 at 17:54 2 Sometimes IE 6 doesn’t hear properly unless you shout. – Paul D.

Waite May 4 '10 at 15:27 wow I didn't even remember answering this question until I saw this new comment! I don't remember why those were in all caps, but I think Paul's got the gist of it :) – Josh E May 6 '10 at 16:51.

I'd use this to target IE with a separate css file: I know this isn't a direct question, but IE is ALWAYS a pain to deal with! Most designers/developers that I know will make a totally new stylesheet for IE.

Yup, sorry: the code above is just example code to highlight the bug. I used inline styles to make it slightly easier to see what’s going on. – Paul D.

Waite May 15 '09 at 10:33.

A very hacky but a CSS only solution that works okay in IE, chrome and FF. I took kaba's solution - but the problem was, it works okay in IE but all the other browsers show a 4px space between the 2 child divs. The space remains as 4px even if the content on both the divs expand. So to fix that I've used IE conditional statements.

I doesn't look like the best code in the world but it gets the job done. Float test Tester2 Tester1.

I see where you’re going; I think I prefer the inline-block solution for IE though, as that deals with the spacing issue without the need for negative margins. – Paul D. Waite May 4 '10 at 22:50.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.