ansaurus

Question

What's a cross-browser compatible way to right-align child divs and make the parent div get its width from the children?

Answer 1

A:

Have you tried floating all the child divs to the right, then adding a separate footer with width:%100 and clear:both? I believe this will make IE properly scale the parent as it will have an element within it that is the proper width as well as in the document flow (floated objects are removed from the flow.) You may require display:inline on the clear as well.

DeaconDesperado 2010-01-19 20:47:50

Thanks for the answer, but unfortunately it doesn't seem to fix my problem. If I put `float:right` on the child divs then in IE the result I get is that the parent has the full width of the page, whereas I want his width to be only big enough to hold his children (as it was when the child divs weren't floating). This problem persists even if I add another child div with the styles you suggest.

Tim Goodman 2010-01-19 21:04:24

Out of curiosity, what programming language are you using to deliver the dynamic content? And what kind of content is being fetched? I only ask because in the case of images I can think of some tremendously extreme methods of accomplishing this by finding the image's size via script and using that within an inline style. Just a thought and likely not the best method.

DeaconDesperado 2010-01-19 21:23:09

I'm working in ASP.Net 2.0, coding in C#. The children are actually drop down lists with the choices being populated from the database. The width of the drop downs ends up matching the width of the longest choice. I could probably write a script to resize the parent div after the width of the content is determined, but it doesn't seem like this should be necessary (especially since I already know I can do it with CSS alone for either Firefox or IE, just not both at once).

Tim Goodman 2010-01-19 21:42:38

Definitely agreed.

DeaconDesperado 2010-01-19 21:43:56

Answer 2

A:

Try adding position: relative; to the parent and float: right; to the children

prodigitalson 2010-01-19 21:46:27

Thanks for the answer but unfortunately it doesn't fix my problem. `float: right` fixes it for Firefox, but causes it to break in IE (specifically, the width of the parent is now the full width of the page, not the width of the children). Even after adding `position: relative` this problem persists in IE.

Tim Goodman 2010-01-19 21:56:00

I've found that `float:right` only causes errors in IE when I'm hosting the page on my IIS localhost. I've updated the original question to reflect that this is apparently an IIS issue.

Tim Goodman 2010-01-19 23:47:48

Answer 3

+2 A:

Edited Jan 21, 2010 @ 21:00 MST : You need to float the parent div to the right. Originally I also floated the child divs right, but this caused trouble in IE7. If you have Firebug, take a look at this test page, which has the result you're after. I tested in Firefox 3.5, IE7, IE8, Chrome, and Safari 4.

Here is the relevant CSS and HTML (I added some margin/padding and background colors so you can more easily see the effect):

   <style type="text/css">
      #parent {
         margin:0;
         background:#ccc;
         float:right;
         padding:20px;
      }
      #parent div {
         background:#eee;
         margin:0 0 20px;
         text-align:right;
      }
   </style>

    ...

   <div id="parent">
      <div>Nulla facilisi. Suspendisse potenti. Sed sed euismod tortor.</div>
      <div>Lorem ipsum, pharetra nec justo. In dapibus neque a libero cursus a laoreet nunc luctus.</div>
      <div>Lorem ipsum dolor sit amdolor.</div>
   </div>

My guess as to why the original didn't work is that IE7 has a number of documented bugs (see here for a list, which includes links to several float bugs). If you float both the parent and child elements to the right, you get the desired results in IE8 and other modern browsers, but in IE7 the parent's width won't collapse to the width of the widest child (enter mischievous bug).

IE7 behaves as expected if you float both the parent and child elements to the left, however (but this isn't what you were after).

Ryan 2010-01-19 22:24:48

This is bizarre . . . that test page works for me, but then if I copy it over to my localhost in IIS it exhibits the error I was seeing in IE . . . so maybe this was really an IIS issue all along. I'll update the original question.

Tim Goodman 2010-01-19 23:33:00

If you haven't already done so, copy and paste *just* the code I set up for you on the test page (i.e., don't paste it into something you already have). I've known IE to do funny stuff if there are things like HTML comments before the doctype declaration.

Ryan 2010-01-20 00:18:21

I've double checked, it's definitely the same code. Actually, further investigation shows that IIS 6 is causing the page to load in IE7 Standards mode. If I go into Dev Tools and switch Document Mode to "IE7 Standards", I see the same bug on your test page. I'll update the question again with this new info.

Tim Goodman 2010-01-20 01:02:26

Hey Tim, I'll check later tonight when I have access to a computer with IE7. Glad you found out what was causing the difference. The easiest solution is to use an IE7-specific CSS file, but I'll see if I can come up with a solution that works without it.

Ryan 2010-01-20 23:43:39

Hey Tim, I updated my answer with the...well, answer. I'm pretty sure this is what you're after. Take another look at the test link and let me know. The key difference was removing the **float:right** from the child divs, then setting their contents to align right.

Ryan 2010-01-22 04:00:38

Hi Ryan, I appreciate your efforts on this. Your solution is close, but not quite right. I want to make sure the inner divs themselves align to the right edge of the outer divs, not just align their text to the right. Try fixing the width of one of the divs to be smaller than the others and you'll see it still aligns to the left of its container in your example.For now, I'm just dealing with this by using a conditional comment to add a separate style sheet for IE 7 and earlier. Not ideal, but so it goes.That said, I appreciate your efforts on this. I've marked your example as helpful.

Tim Goodman 2010-01-22 09:39:04

Sorry to hear that Tim. My guess is that there is an IE bug that's preventing the cross-browser solution you're looking for. Thanks for the up vote.

Ryan 2010-01-22 19:22:23

Answer 4

A:

You need position: relative; on the parent, and most importantly, you need to clear those floats.

Josh Stodola 2010-01-19 22:30:43

ansaurus

tags:

views:

answers:

What's a cross-browser compatible way to right-align child divs and make the parent div get its width from the children?

related questions