Search code examples
htmlcssinternet-explorerwidthunderline

<H2> Underlined title auto-width on IE

#skills
{
    width: intrinsic;
    width: -moz-max-content;
    width: -webkit-max-content;
    width: fit-content;
}
<div class="box">
    <h2 id="skills">skills</h2>
    <p>Lorem Ipsum.</p>
</div>

I'm working on a website where I would like to underlined h2 titles in a better way than underlined css property. Founding a trick that consisted in adding a border bottom, I've now problems in auto-fitting content.

My code was organized like this :

HTML part (with my 'box' div which is a flexbox) :

The underline style is perfect but it's not fitted on IE...

h2 underlined

I found some questions like this one and tried to modify like :

#skills
{
    display: table;
}

But it doesn't work...

Could you help me ?

Thank you for your help,

Jerry

Solution

  • With your help, I resolved my question. The correct solution was to add an intermediate div like this :

    <div class="box">
    <div class="intermediate"><h2 id="skills">skills</h2></div>
    <p>Lorem Ipsum.</p>
</div>

    And then define as display: table; skills element.

    As box element was a flexbox, skills had the same dimension of his parent. Adding an intermediate div, the intermediate div takes all space but next skills has a proper width.

    Thank you for your help !