IE7 compatibility float:right inside float:right

Question

This is driving me crazy. I've got a div floated to the right inside of another div, like so:

<div id='container'>
  <div id='status'></div>
  Current Membership: <%= @distribution_list.total %>
</div>

I've got the following css rules:

div#container {
  float:right;
  margin-right:3px;
}
div#container div#status {
  float:right;
  border:#aaa solid 1px;
  border-radius:12px;
  width:12px;
  height:12px;
  margin:-1px 0px 0px 5px;
  background:#ff0000;
}
div#container div#status.good {
  background:#5bd64a;
}

I don't mind the border-radius not functioning properly in IE7. What I do mind, is that when this is displayed in IE7 the text "Current Membership: total" is on the next line. The only way I've gotten this to work is by specifying a width for container, which I would prefer not to do. Anyone know of a way to get this to work?

Answer 1

When I test (emulated) in IE7, the text shows up on the same line, but just on the left edge of the screen. I added the following for layout, but it otherwise looks similar in layout to me:

div#container {
  float:right;
  margin-right:3px;
  text-align: right;
}