How can I create a border around an input button? - css

Question

Here's a fiddle
I have this code where I tried to make a button have a blue line around it. But when I ran the code I just get a blue line at the top of the button. I added disply: inline-block but that doesn't seem to work. Is there some way I can make the div's border surround the input button?
<div id="A">
<div style="border: 1px solid Blue">
<input style="float: left; display: block" type="button" onclick="doTest('total'); return false;" />
</div>
<div id="B" style="display: block; float: left;">ABC</div>
</div>

Answer 1

Why all those divs?
See demo Fiddle.
HTML:
<form id="A" action="">
<fieldset>
<span><input id="button1" type="button" value="Caption" onclick="" /></span>
<label id="B" for="button1">ABC</label>
</fieldset>
</form>
CSS:
#A span {
border: 1px solid blue;
}

Answer 2

Remove "float: left" from your input and add it to the surrounding div.

Answer 3

Setting height on a DIV that wraps INPUT can help:
<div id="A">
<div style="border: 1px solid Blue; height: 20px;">
<input style="float: left; display: block" type="button" onclick="doTest('total'); return false;" />
</div>
<div id="B" style="display: block; float: left;">ABC</div>
</div>

Answer 4

<div id="A">
<div style="border: 1px solid Blue;float:left">
<input style="display: block" type="button" onclick="doTest('total'); return false;" />
</div>
<div id="B" style="display: block; float: left; margin-left:100px;">ABC</div>
</div>

Answer 5

If you want the text ABC inside the blue border you have to move it inside the div with the border, combined with the height "trick" as suggested by spektom.
<div id="A">
<div style="border: 1px solid Blue; min-height:20px">
<input style="float: left; display: block"
type="button"
onclick="doTest('total'); return false;" />
<div id="B" style="display: block; float: left;">ABC</div>
</div>
</div>