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

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.

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? — , Feb 01 '11 at 12:53
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 '11 at 22:44
This is strange that this cannot be changed, since I thought all default styles in browsers were set through user agent stylesheets. — Cameron Martin, Apr 14 '14 at 13:50
Marking this as a duplicate of [this question](http://stackoverflow.com/questions/29652337/prevent-the-fieldset-elements-border-from-going-through-the-legend-element/29652463#29652463) so that people in the future don't have to sieve through all these answers. — Josh Crozier, Apr 16 '15 at 20:17

score 106 · Answer 1 · answered Jul 08 '14 at 09:07

106

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

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

answered Jul 08 '14 at 09:07

vkjgr

4,338
1
26
19

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 08 '14 at 21:10
This is the best solution. It feels much better than using absolute positioning or any additional elements. – TDH Mar 18 '15 at 22:34
Yes better than absolute positioning. The legend may have its own height. – Steven Mouret Jun 26 '15 at 10:28
1

Doen't work in Chrome 55 :( – Azat Gataoulline Dec 06 '16 at 11:06
nice catch. way better than having to manually account for its unusual implicit height – oldboy Jun 12 '19 at 21:15
This is a whole lot nicer than the other solutions, but it may require paying attention to other elements inside the fieldset. I got around my issue by using padding instead of margin (but that's a pretty particular situation) – Damon Sep 04 '19 at 01:59
This worked very well. At first my lower elements were appearing to the right of legend, this is fixed by setting the legend width to 100%. – publicmat Sep 24 '19 at 14:01
I found this didn't really work on Safari browsers. You can actually still use a legend element for sake of semantics but utilise `display: contents;` to avoid the wacky placement cross browsers (latest 2 versions of major ones nowadays). Of course this however means you can't add padding, margins etc to the legend element itself. – Tom C Mar 31 '22 at 14:06

score 73 · Answer 2 · answered Oct 16 '12 at 09:56

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

answered Oct 16 '12 at 09:56

Carlos Martinez T

6,458
1
34
40

Thanks for this comment. I did not get how relative and absolute worked together until seeing/trying this. – Joel Baumert Jun 18 '16 at 12:17
2

@Veiko's float should be used. This one is a bad practice as it will fail: http://jsfiddle.net/g18Lwnf7/ – pzin Aug 30 '18 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. – V. Rubinetti Jun 28 '23 at 22:34

score 12 · Answer 3 · answered Feb 01 '11 at 15:04

12

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

answered Feb 01 '11 at 15:04

Lea Verou

23,618
9
46
48

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)! http://reference.sitepoint.com/css/outline – Jared Mar 17 '11 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 :) – Henrik Erlandsson Jun 14 '13 at 13:50
1

This does not solve the issue when having colored backgrounds for fieldsets – feeela Jan 23 '15 at 11:59
ha! uve given presentations at conferences b4 havent u? – oldboy Jun 12 '19 at 21:16

score 10 · Answer 4 · answered Dec 12 '12 at 16:27

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>

answered Dec 12 '12 at 16:27

Marthein

153
1
5

16

This is invalid html (at least as of html5). – Nathan Oct 25 '13 at 19:11

score 2 · Answer 5 · answered Feb 01 '11 at 12:32

2

Set margins for positioning. It works without problems.

legend {margin-left:50px;} /* 50px from Left of the Fieldset */

answered Feb 01 '11 at 12:32

Chugworth

480
2
5

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 – Brad at Kademi Sep 06 '12 at 23:25

score 1 · Answer 6 · answered May 14 '14 at 13:31

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

answered May 14 '14 at 13:31

user3515900

29
2

score 0 · Answer 7 · answered Feb 04 '15 at 19:25

0

This seems more straight forward to me.

fieldset legend { 
    position:relative;
    left:20px;
}

answered Feb 04 '15 at 19:25

user1286322

271
1
2
8

2

Please add some explanation to your answer on how this solves the issue – Huangism Feb 04 '15 at 19:59

score -4 · Answer 8 · answered Dec 17 '12 at 12:13

-4

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

fieldset legend { text-align:left; }

answered Dec 17 '12 at 12:13

user1106135

1
1

What's a useless answer. – Phương Nguyễn Mar 23 '14 at 13:07
This does not answer the question, which is primarily about vertical positioning, not text alignment. – Matt Browne May 16 '14 at 21:37

score -5 · Answer 9 · answered Mar 23 '14 at 13:10

-5

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

answered Mar 23 '14 at 13:10

Phương Nguyễn

8,747
15
62
96

score -13 · Accepted Answer · answered Feb 01 '11 at 09:22

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

answered Feb 01 '11 at 09:22

Best website designer

129
2

4

@Craig Wayne Because this answer doesn't solve the problem? – Jo Smo Apr 06 '14 at 09:31

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

10 Answers10

Related