Question

I’m trying to simply align a set of text and <input> elements to the right, so that the left side of the inputs always aligns at the same location (they are the same width, so what’s really happening is the right side is aligned to the right side of their container), and the left side of the label text is jagged.

It’s not ideal for a large form, but for what I need, it looks better that way.

Here’s the HTML and CSS (also at this jsfiddle):

HTML:

<div id="pullthrough-control-panel">
    <div class="float-l right-text" id="pullthrough-range-panel">
        <h3 class="center-text">Date Range</h3>
        Start: <input type="text" name="rangestart" />
        <br />
        End: <input type="text" name="rangeend" />
    </div>
</div>

CSS:

.float-l{
    float: left;
}

.right-text{
    text-align: right;
}

.center-text{
    text-align: center;
}

#pullthrough-control-panel{
    height: 6em;
    padding: .25em;
}

That’s it. Now, the real problem comes into play when I try to go cross-browser with the page. As usual, Firefox works as expected. The problem is with Chrome. The lower input (“End”) juts out to the right of the upper one. There’s no reason this should be happening.

If you have both browsers, you can check it out at the jsfiddle I posted above.

Is this a bug in Chrome’s CSS engine? Is there something happening that I’m not aware of?

Answer 1

You’re doing it all fine, just move the <br /> in the upper line without spaces after the input:

        Start: <input type="text" name="rangestart" /><br />
        End: <input type="text" name="rangeend" />

jsFiddle demo

That’s it!