How to limit width of <h1> - <h5> tag by length of content

Question

Thanks for taking your time for my question. I know, this question has been asked and answered before, but somehow i can't make it look like expected. I will show you below some of the things I've tried.

I have a div with a rounded boarder where i want to display a caption (one of the standard captions - ).

This is what i've got:

HTML:

<div id="selectModel" class="admin_dropdown">
   <h5 class="admin_caption">Wählen sie das anzuzeigende Model</h5>
   [...]
</div>

CSS:

h5.admin_caption {

        width: 300px;
        margin-top: -20px;
        margin-left: auto;
        margin-right: auto;
        background: white;

    }

I am not allowed to post pictures (<10 rep), so I hope jsfiddle works).

How it looks like: http://jsfiddle.net/vrP39/

What i want it to look like: http://jsfiddle.net/vrP39/1/

As you can see, the result of the last fiddle is achieved through changing the width until it matches the caption. Of course i want to use it with several captions with different length, so this is not an option.

What i've tried so far:

1. Using a <span> around the text in my caption, also styling the <span> element instead of the <h5>
2. display: inline-block or display: inline
3. float: left in the <h5> and clear:left in the following element

I saw this post (amongst others) here on stackoverflow (Width of Headers (H1, H2 etc)) but nothing that i tried seems to work.

What did i do wrong? Any help is greatly appreciated, thanks in advance!

Answer 1

Seems like you are trying to reproduce a <fieldset> element. So why not use that element?

<form>
    <fieldset>
        <legend>Wählen sie das anzuzeigende Model</legend>
        <select id="selectModelDDL" onchange="createTable(this);">
            <option value="1">1</option>
        </select>
    </fieldset>
</form>

With the <fieldset> you will create the border around the elements where the <legend> is the text that is on the border.
Now you can just align the text to the center:

fieldset
{
    text-align: center;
    border: 1px solid black;
    border-radius: 15px;
    font-weight: bold;
    font-size: 13px;
    padding: 10px;
}

jsFiddle

Answer 2

Working with your current code, you can do this : http://jsfiddle.net/vrP39/6/

Add a <span> inside the h5 (for the background colour)

<h5 class="admin_caption"><span>Wählen sie das anzuzeigende Model</span></h5>

And for the CSS

h5.admin_caption { text-align:center; margin-top: -20px; }
h5.admin_caption span { display:inline-block; background:#fff; padding:0 5px;}

The first bit centres the text, and then we have to add in a background to hide the black border line.

The span needs to be set to inline-block, so we can add a bit of padding on the left and right, as you can't do that if the span> element is using the default display:inline property.

Answer 3

You can also try to wrap the caption in a div:

HTML:

<div class="container">
    <div id="selectModel" class="admin_dropdown">
        <div class="caption_wrapper">
             <h5 class="admin_caption">Wählen sie das anzuzeigende Model</h5>
        </div>
        <select id="selectModelDDL" onchange="createTable(this);"></select>
    </div>

CSS:

div.caption_wrapper {
    margin: 0 auto;
    text-align: center;
    height: 1px;
}
h5.admin_caption {
    background: #FFF;
    display: inline-block;
    position: relative;
    top: -20px;
    margin: 0;
}

http://jsfiddle.net/vrP39/9/