Text in Border CSS HTML

Question

I\'d like to have a div that looks like this:

Is this possible to do with HTML + CSS

Answer 1

I know a bit late to the party, however I feel the answers could do with some more investigation/input. I have managed to create the situation without using the fieldset tag - that is wrong anyway as if I'm not in a form then that isn't really what I should be doing.

/* Styles go here */

#info-block section {
    border: 2px solid black;
}

.file-marker > div {
    padding: 0 3px;
    height: 100px;
    margin-top: -0.8em;
    
}
.box-title {
    background: white none repeat scroll 0 0;
    display: inline-block;
    padding: 0 2px;
    margin-left: 8em;
}

  

    

      

        Audit Trail
      
      

        

        
      
    
  

This can be viewed in this plunk:

Outline box with title

What this achieves is the following:

• no use of fieldsets.

• minimal use if CSS to create effect with just some paddings.

• Use of "em" margin top to create font relative title.

• use of display inline-block to achieve natural width around the text.

Anyway I hope that helps future stylers, you never know.