Floating Too Far Right

Question

I've got a record management web application which displays a master record on one screen and AJAXes dynamically built editors into an editor div, which I've used JQuery to make draggable. That works.

Even though the div isn't a window, I thought it might be a nice idea to make it act a bit more like one, so I coded in a "close" button. The structure looks like this:

<div id="editor">
  <div id="draghandle" />
  <div id="closebutton" />
  <div id="editorbody" />
</div>

Editorbody is variable-dimension depending on what people are trying to enter.

Draghandle's width is set at 100% of editor. Closebutton is set up in CSS as float:right.

My problem is that, in IE6 and IE7, the close button floats too far right. It's always against the right edge of the window, no matter where I drag the editor div around to. In Firefox and Safari it looks like I expected it to - the window is as wide as editorbody and closebutton sits in the top right corner.

I'm not particularly attached to float:right, just looking for a way to set up the CSS that'll give me the same result across all browsers. Any ideas?

"Screenshots"

Here's a mockup of what I'd like to do on jsbin (thanks, redsquare)

sample code

I'm working with legally sensitive information so I can't provide screenshots of the app. I have, however, taken some shots and blocked out the text and interface, leaving only the window structure.

how it looks in IE7

how it looks in firefox 3

Answer 1

For the record, what worked to fix this was changing the CSS for closebutton from

float: right;

to

position: absolute;
right: 5px;
text-align: right;

This produces proper results in IE, and with a little padding for the internal form fields there's no worry about overlap.

Answer 2

CSS hacks are needed sometimes:

* + html #editor #closebutton /* IE7 */, * html #editor #closebutton /* IE6 */ {margin-right: 100px;} // insert whatever value that fits here

Answer 3

for IE specific css hacks you can do something like:

#divId {    
   margin-right: 0; /*Normal styles for all browsers*/    
  *margin-right: 100px; /*The asterisk allows only for IE6 AND IE7 to read this*/        
  _margin-right: 90px; /*The underscore allows only IE6 to read this style*/    
}

Just make sure the asterisk and underscore hacks are placed after the normal (valid) css style.

Answer 4

You may want to consider just using a JQuery Dialog instead since its premade and the styles already work cross platform.