How to position the legend inside a fieldset with a border? [duplicate]

Question

According to the several references on the web, it is not possible to position a legend. So it is suggested to wrap it with span:

<legend><span>Foo</span></legend> 

Then we can position the span inside the fieldset. but then when I want to add a border on top of the fieldset, there is a gap for the legend. Luckily, I've found that adding border to the legend also fixes this little, tiny gap but that's ugly solution (as everything else with css). Do you have any more valid solutions to this problem?

note: I've found the solution concurrently, after I've started writing this question, so I want to still ask it.

Answer 1

I found that simple float:left for LEGEND will do the job.

Codepen sample: http://codepen.io/vkjgr/pen/oFdBa

Answer 2

I know this is an old question, but I got this page when I googled "fieldset legend position", and I really couldn't find a good answer.

The legend just won't behave!, so the best solution I found was to position it absolute and have a padding top on the fieldset. JSFildle example: http://jsfiddle.net/carlosmartinezt/gtNnT/356/

fieldset {     position:relative;     padding-top:50px; }  legend {     position:absolute;     top:20px;     left:18px; }​