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;
}