43

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.

4
  • 1
    Let me see if I get this right; You want to know how you can move the legend tag away from it's original position and then close the gap in the top border? If yes, then why even use a fieldset legend tagset?
    – user557419
    Feb 1, 2011 at 12:53
  • 34
    You'd do this for semantics and accessibility. The visual styling of an element has little to do with how a machine (e.g. screen reader) treats it.
    – Jared
    Mar 17, 2011 at 22:44
  • 3
    This is strange that this cannot be changed, since I thought all default styles in browsers were set through user agent stylesheets. Apr 14, 2014 at 13:50
  • Marking this as a duplicate of this question so that people in the future don't have to sieve through all these answers. Apr 16, 2015 at 20:17

10 Answers 10

109

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

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

8
  • 2
    Yep, I landed on this page from google, and was surprised float:left was so far down the page when clearly the easiest answer.
    – Ben
    Sep 8, 2014 at 21:10
  • This is the best solution. It feels much better than using absolute positioning or any additional elements.
    – TDH
    Mar 18, 2015 at 22:34
  • Yes better than absolute positioning. The legend may have its own height. Jun 26, 2015 at 10:28
  • 1
    Doen't work in Chrome 55 :( Dec 6, 2016 at 11:06
  • nice catch. way better than having to manually account for its unusual implicit height
    – oldboy
    Jun 12, 2019 at 21:15
73

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;
}​
3
  • Thanks for this comment. I did not get how relative and absolute worked together until seeing/trying this. Jun 18, 2016 at 12:17
  • 2
    @Veiko's float should be used. This one is a bad practice as it will fail: jsfiddle.net/g18Lwnf7
    – pzin
    Aug 30, 2018 at 17:14
  • I hate using floats (for anything other than their very specific intended use-case), but in my case I need my legend to sort of flow inline with the rest of the elements in the fieldset, and float was the only thing that worked. I wish position: static or display: inline worked. Jun 28, 2023 at 22:34
12

Use an outline instead of a border: http://jsfiddle.net/leaverou/gtNnT/

4
  • 5
    Outline is useful if you don't care about IE 5/6/7 users (still a good chunk of people). IE 8 and Firefox support (all current versions) are also spotty. If only browser support was better, this would be the best option (so long as you're not trying to do any fance border effects like rounded corners)! reference.sitepoint.com/css/outline
    – Jared
    Mar 17, 2011 at 22:55
  • 11
    I'm thrilled to report that in 2013, IE5/6/7 user are not a good chunk of people anymore. I think about that and it makes me deeply happy :) Jun 14, 2013 at 13:50
  • 1
    This does not solve the issue when having colored backgrounds for fieldsets
    – feeela
    Jan 23, 2015 at 11:59
  • ha! uve given presentations at conferences b4 havent u?
    – oldboy
    Jun 12, 2019 at 21:16
10

The OP almost answered his own question: wrapping does the trick, but it's the other way around. Use:

<span><legend>Foo</legend></span>
1
  • 16
    This is invalid html (at least as of html5).
    – Nathan
    Oct 25, 2013 at 19:11
3

Set margins for positioning. It works without problems.

legend {margin-left:50px;} /* 50px from Left of the Fieldset */
1
  • 1
    setting a margin-top doesnt work well, as the legend is still offset relative to the fieldset. Its alignment changes as the height of the legend changes Sep 6, 2012 at 23:25
1

You can use margin-bottom "-50px" for legend and padding-top "50px" for fieldset so do not overlap.

fieldset { 
padding-top:50px;
}

fieldset legend { 
margin-bottom:-50px;
}
0

This seems more straight forward to me.

fieldset legend { 
    position:relative;
    left:20px;
}
1
  • 3
    Please add some explanation to your answer on how this solves the issue
    – Huangism
    Feb 4, 2015 at 19:59
-4

Found this the most consistent, tested in IE7, Firefox and Chrome

fieldset legend { text-align:left; }

1
  • This does not answer the question, which is primarily about vertical positioning, not text alignment. May 16, 2014 at 21:37
-6

I ended up using just div elements. In the end, I just need the border and the text over the border, that's it.

-13

I think this will work

 <legend><span>ur text</span></legend>

Give border to the legend tag

legend {padding: 2px;border: 1px solid green;}
1
  • 4
    @Craig Wayne Because this answer doesn't solve the problem?
    – Jo Smo
    Apr 6, 2014 at 9:31

Not the answer you're looking for? Browse other questions tagged or ask your own question.