Search code examples
jqueryhtmlcsspositioning

How to make a child div = parent's height which has display:inline-block and unspecified height?

I have to separate the background of a button from the parent, for reasons related to the tumblr customisation quirks.

Here is the html:

<a href="link">
    <div class="innerNest"> //I'm guessing we need this to bring the two divs to T:0 L:0
        <div class="buttonText">{tumblr variable}</div>
        <div class="buttonBG"></div>
    </div>
</a>

This is the css I'm stuck with, at least for the tag:

a{
    display: inline-block;
}

I've made a very descriptive jsfiddle here: http://jsfiddle.net/hVuaf/35/

NB: It's a no brainer to just go like this for eg (inline CSS for demo purposes):

<a href="link" style="background-color:#fff;display:inline-block">Link</a>

But i just can't, it's got to do with me wanting control over variable assigned colours in Tumblrs customised theme edit panels. Basically it supports colours to the hills, but i need to work with rgba, not #, hence my need to separate the components of the button.

Thanks.

Solution

  • Is this what you are after?

    http://jsfiddle.net/cdj2L/

    Basically, I've set the anchor to position:relative and then the text inside is just standard. Then the background I've set to absolute and width/height are 100%, filling the anchor. Finally, a z-index sorts out the layering.

    Hope that helps :)