Question

I’ve got a simple form where I’m trying to align two fields horizontally that will take money inputs. I want to label the inputs with a $ (that should not be editable) so that people know to put in money. I ended up doing this with an absolutely positioned span element. The jsfiddle is at http://jsfiddle.net/7tCfe/2/.

Everything works fine in Internet Explorer and Firefox, but in Chrome the currency label for the second money input gets positioned all the way to the left instead of inside the second input. In the jsfiddle, the second symbol is on top of the symbol for the first money field.

How do I get Chrome to position an element absolutely relative to a parent element? I’ve tried messing with the .two-column class and changing it’s display and position but it just ends up breaking the rest of the form.

Answer 1

Add the one-column class to the second <div> as well, and add clear: both; to the following <div>‘s style. You can do this with an inline style attribute (meh) or by using an additional class, or with the following CSS rule:

.one-column + div:not(.one-column) {
    clear: both;
}

However, :not does not work in IE <9, so (if you care about IE) you probably want to use a different selector, such as

.one-column + .one-column + div {
    clear: both;
}

Yes, IE’s CSS 3 selector support is abysmal.