Question

When I add a border to fieldset element and then drag the legend down to work as a heading of sorts, the gap in the fieldset remains.

Is there a way to have the entire border, without adding a wrapper div and setting the border on that?

Example

CSS

fieldset legend {
    position: relative;
    bottom: -40px; 
    background: transparent; 
}

jsFiddle.

Answer 1

Tested in IE7/IE8 and recent versions of Firefox, Chrome, Safari, Opera.

It looks the same in all of them, with the exception that IE7 is adding a little space on the left.

I had to add an innocent little wrapper span.

http://jsfiddle.net/thirtydot/ErZEj/

HTML:

<form>
    <fieldset>
        <legend><span>I am</span></legend>

        <div style="margin-top:80px">dsfsdf</div>

    </fieldset>
</form>

CSS:

fieldset {
    border: 2px dotted #333;   
    height: 340px;
    position: relative
}
fieldset legend {
    position: absolute;
    top: 0;
    left: 0
}
legend span {
    position: absolute;
    left: 0;
    bottom: -60px;
    white-space: nowrap /* or define width */
}