A "title" or a "header" for a div

Question

I am building a simple web-page with a few sections in it and I've been stomped at how to solve one little styling issue.

I have several DIVs with solid border and a few other GUI items (text boxes, buttons, etc) inside each one. Each DIV kind of "boxes" related items into a nice, visually pleasing and meaningful way. However, I would like to add a title or a caption onto the DIV in the middle of the border to describe that box's function. So far I can add text below the border or above, but not in the middle. Is that even possible?

Thank you!

What I have:

What I want:

Would you share some code? that we can see what you already tried. — sajjad rezaei, Mar 09 '22 at 21:55
Does this answer your question? [Which CSS tag creates a box like this with title?](https://stackoverflow.com/questions/113640/which-css-tag-creates-a-box-like-this-with-title) — sajjad rezaei, Mar 09 '22 at 21:57
@sajjad rezaei Yeah, the title is misleading, thats why I didn't find it. — George, Mar 21 '22 at 14:37

score 2 · Accepted Answer · answered Mar 09 '22 at 21:55

2

What you want looks like a fieldset element with a legend tag inside, but I wouldn't recommend using them. Just use position: absolute like this:

<div class='section'>
    <header>Header</header>
    ....
</div>

.section{
    position: relative;
}

.section header{
    position: absolute;
    top: 0;
    transform: translate(0, -50%);
    background: white;
}

answered Mar 09 '22 at 21:55

Jared

1,294
2
8
13

This doesn't work. When I plug your data into my project, nothing shows up. I put a border into the .section and I get a box, but no Header. What am I doing wrong? Fieldset seems to be working, why is it not recommended? – George Mar 17 '22 at 14:54
Fieldset/legend had issues if you try to style them with CSS as far as i remember. If you are fine with default view, it is ok to use them. Cannot say what's wrong with your code untill i see it =) – Jared Mar 17 '22 at 18:30
what kind of issues? I can style them just fine with CSS. – tacoshy Mar 17 '22 at 19:26
There are some limitation and "several special styling considerations" as [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset) says. Also checkout this [example](https://codepen.io/JaredSpb/pen/vYpLRJP) – Jared Mar 17 '22 at 21:53

tacoshy · Answer 2 · 2023-06-27T19:47:22.273

2

What you looking for is build in HTML nativly: The border Frame is part of the <fieldset> while the title is the <legend>

<fieldset>
  <legend>Header</legend>
</fieldset>

As (wrongly) stated by others, that solution would not work with Bootstrap. The solution to that is quite easy by reverting the Bootstrap overwrites with all: revert;

.revert,
.revert legend {
  all: revert;
}

<!-- Bootstrap 5 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">



<!-- Body -->
<fieldset>
  <legend>Header</legend>
</fieldset>

<fieldset class="revert">
  <legend>Header</legend>
</fieldset>

edited Jun 27 '23 at 19:47

answered Mar 09 '22 at 22:21

tacoshy

10,642
5
17
34

This wont work when using bootstrap 5. I miss the
/ tagging.
– mono1 Mar 09 '22 at 23:00
@mono this is not a Bootstrap question and even Bootstrap has fieldset and legend as this is a HTMl solution and Bootstrap is a CSS Framework. – tacoshy Mar 10 '22 at 12:55
My comment wasn't a negative poke at your answer, just a note I left here for anyone stumbling across the answer in the future.
is nice and handy, but in the long run you're better off making your own as @Jared answered below.
– mono1 Mar 10 '22 at 15:04

A "title" or a "header" for a div

2 Answers2