[SOLVED] A "title" or a "header" for a div

Issue

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 have

What I want:
enter image description here

Solution

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 By – Jared

Answer Checked By – Senaida (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *