views:

946

answers:

3

I have the following HTML

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <style>
    .box
    {
        border:solid black 1px;
        padding:0px;
        margin:0px;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <input class="box" style="width:300px;" /><br />
        <input class="box" style="width:150px;" />
        <input class="box" style="width:150px;" /><br />
        <input class="box" style="width:100px;" />
        <input class="box" style="width:100px;" />
        <input class="box" style="width:100px;" />
    </form>
</body>
</html>

The idea is that the textboxes should finish pixel perfect on the right hand side.

I will eventually add spacing on rows 2 and 3 enlarging the widths to compensate, but for the moment I would like to get this simple sample to render.

So how can I remove the margins of these textboxes such that the align properly?

A: 

Are you talking about right justifying all the textboxes?

If so, that's not a margin question. That's simply putting the textboxes in a containing element. Perhaps a and then set the text-align: right; css style on the div.

+2  A: 

I found adding float: left; to .box did what you wanted.

.box {
    padding:0px;
    margin:0px;
    float: left;
}
Ross
This kinda works. However there seems to be a discrepancy in the total widths. I have to remove 2 pixels from the first text box on row 2 and the first 2 on the 3rd row in order to line everything up... This seems wrong
Rory Becker
True - I've just realised RoBorg's answer (http://stackoverflow.com/questions/413573/how-can-i-completely-remove-the-margin-of-textboxes-in-html-css#413608) is more correct, mine just does the same thing a little wrongly.
Ross
by the way it looks very different on chrome and IE.
Schwartser
To keep things clearer, I'm going to ask about the "total widths strangeness" as a separate question
Rory Becker
+3  A: 

They're not lining up because of the whitespace between them.

If you were to remove all the newlines and tabs between the <input> elements, it would display as you want.

Greg
I forgot about this annoying thing. Removing this will work also.
Ross
Works as well as Ross' answer and does not require Float ( which suits me better) but still suffers from strange total widths? See comment made under his answer.
Rory Becker
To keep things clearer, I'm going to ask about the "total widths strangeness" as a separate question
Rory Becker