How To Align A Text Outside Of The Legend In A Fieldset

I want to align a text outside of a legend element, but I cannot figure out a way to calculate the width of the legend. This example works exactly as I want, but it uses a hard-cod

Solution 1:

Wrap span tags around the 'legend legend legend' text in the legend tag, and the other position:absolute span tag and display:inline-block them.

<fieldset>
    <legend style="">
        <span style="border:3px solid red; display:inline-block;">Legend legend legend</span>
        <span style=" display:inline-block;"><span style="position:absolute; top:0px; padding-left:5px; ">Aligned Text</span></span>
    </legend>
    text text text
</fieldset>

DEMO

Solution 2:

Easiest way would be to assign a position:relative to your legend and position:absolute to your child span.

See this fiddle: http://jsfiddle.net/JS6dP/14/

Remember, the trick is to use a right value which is just higher than the width of this span.

HTML:

<fieldset>
    <legend style="border:3px solid red">
        Legend legend legend legend
        <span class="legendText">Aligned Text</span>
    </legend>
    text text text
</fieldset>

CSS :

legend { position: relative; }
.legendText { 
    display: inline-block;
    position: absolute;
    width: 92px;
    top: -16px;
    right: -96px;
}

Hope that helps.

Solution 3:

since ever form tags are difficult to style and even more if you want it cross-browsers.

when you face a legend that needs a peticular style, best is to drop the legend for a hx tag to preserve semantic as much as possible.

From then, hx tags are easy to style and your fieldset should make no fuss about it :)

<fieldset>
    <h1 class="legend">
        Legend legend legend
        <span>Aligned Text</span>
    </h1>
    text text text
</fieldset>

fieldset {
  margin-top:1.25em;/* if no legend, increase margin-top*/
}
h1.legend {
  font-size:1em;
  display:table;/* to shrink on its content */
  margin-top:-1em;/* go up where legend stands usally */
  background:white;/* hide fieldset beneath */
  border:solid red;
}
.legend span {
  position:absolute;
  margin:-0.7em 0 0 0.5em;/* climb a little more */
  /* no coordonates needed, it shows where it is suppose too */
}

result : http://codepen.io/anon/pen/wirLd