Please take a look at the following example:
http://www.ballot-box.net/test/appearance.html
How can I get the red square aligned left of the input text field?
You could remove display: block and instead use float: left;
However, this would be easier, and there would be more options, if you reversed the order of the two elements.
changing your code to :
<input type="text" name="bgcolor1" value="Red" size="15" maxlength="25" style="width: 115px; margin-right:-145px; margin-left:30px; vertical-align:middle;">
<a href="" style="border: 1px solid #000000;width: 15px;height: 15px; background: red; display:inline-block;vertical-align:middle; "></a>
OR
<a href="" style="border: 1px solid #000000;width: 15px;height: 15px; background: red; margin:.2em .5em 0 0; float:left;"></a>
should do the trick.
It would be easier sill to just reverse the order of the elements int he markup ( I dont see why the empty anchor MUST NECESSARILY come after the input)
Alternatively: Leave display:block on the link, then add float:left; margin:0 0 0 25px; to the input.
Shitttttt!!! I meant align right!!!
Just apply float:left to both the input and the link.
Nope, doesn’t seem to work. See updated link.
thats because it should be float: RIGHT to both elements. The first element will then be at the right most the second will appear left of it. ( same thing as floating both left, except mirrored)
I think I should just solve this problem by using a table to put the input box and the square next to each other, don’t you guys think? See the updated link. That’s what I wanted, but without using a table.
By the way, the alignment with both float to the right, of both float to the left looks different in IE than in Chrome & FF.
That’s always the wrong option. This is not tabular data. 
If I were you, I’d reverse the original order and set them both to display: inline-block.
Adding a valid !DOCTYPE to your example page should fix most or all of the inconsistencies between browsers.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!--
Added a valid 4.01 Transitional DOCTYPE, html, head, and body tags. (No more quirks mode.)
On-page css could be placed between the style tags in the head section.
Closed the p tags.
Your code. Indents are for my convenience.
My contribution to the cause is shown last.
-->
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>untitled</title>
<style type="text/css">
p {margin-bottom:0}
</style>
</head>
<body>
<p>using table</p>
<table cellspacing="0" cellpadding="0" bgcolor="#448ccb" border="0">
<tr>
<td>
<table cellspacing="1" cellpadding="5" width="500" border="0">
<tr>
<td bgcolor="#f9f9f9" align="left" width="50%">
Background color of <u>title</u>
</td>
<td bgcolor="#f9f9f9" align="left" width="50%">
<table>
<tr>
<td>
<input type="text" name="bgcolor1" value="Red" size="15" maxlength="25" style="width: 115px">
</td>
<td>
<a href="#" style="display: block;border: 1px solid #000000;width: 15px;height: 15px; background: red;"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p>Try this: changed {display:block} to {display:inline-block}; added {vertical-align:middle} to "middle" the red square.</p>
<table cellspacing="0" cellpadding="0" bgcolor="#448ccb" border="0">
<tr>
<td>
<table cellspacing="1" cellpadding="5" width="500" border="0">
<tr>
<td bgcolor="#f9f9f9" align="left" width="50%">
Background color of <u>title</u>
</td>
<td bgcolor="#f9f9f9" align="left" width="50%">
<input type="text" name="bgcolor1" value="Red" size="15" maxlength="25" style="width:115px;">
<a href="#" style="display:inline-block; vertical-align:middle; border:1px solid #000000; width:15px; height:15px; background:red"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Thanks ronpat!
I forgot all about adding a !DOCTYPE to your the example page.
Your code with {display:inline-block} worked just fine!
You’re welcome. Thanks for the feedback. Glad to help.