How to position the legend inside a fieldset with a border?

css forms legend fieldset
nocss guy picture nocss guy · Feb 1, 2011 · Viewed 76.7k times · Source

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

Veiko J&#228;&#228;ger picture Veiko Jääger · Jul 8, 2014

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

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

Related questions

How to align checkboxes and their labels consistently cross-browsers

This is one of the minor CSS problems that plagues me constantly. How do folks around Stack Overflow vertically align checkboxes and their labels consistently cross-browser? Whenever I align them correctly in Safari (usually using vertical-align: baseline on the input), …

Read More
Twitter Bootstrap Form File Element Upload Button

Why isn't there a fancy file element upload button for twitter bootstrap? It would be sweet if the blue primary button was implemented for the upload button. Is it even possible to finesse the upload button using CSS? (seems like …

Read More
Put icon inside input element in a form

How do I put an icon inside a form's input element? Live version at: Tidal Force theme

Read More