Make the background-color of a
fill the enclosing

Question

I have an HTML table whose cells contain divs with display:inline-block, containing text of varying sizes.

I need the text to align on the baseline, and I need the background colors of the divs to fill the height of the cells. For the largest font, the background color does fill the cell, but it doesn't for the smaller fonts:

How it looks in Firefox

Is this possible? Obvious solutions like div { height:100% } seem to be scuppered by the varying font sizes.

Here's the code so far:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style type="text/css">
    table td {
        vertical-align: baseline;
        padding: 0;
    }

    td div {
        display: inline-block;
    }
  </style>
</head>
<body>
    <table>
        <tr>
            <td style="background-color:cyan">
                <div style="background-color:pink;">Pink</div>
                <div style="background-color:green;">Green</div>
            </td>
            <td style="background-color:cyan">
                <div style='font-size: 40pt; background-color:yellow;'>
                    Big yellow text
                </div>
            </td>
            </tr>
  </table>
</body>
</html>

It's also on jsfiddle here.

If you're already using a table, why not just use table cells? — Evan Davis, Dec 01 '11 at 16:38
@Mathletics: It's complicated. :-) I need the `div`s for reasons that aren't obvious from this simplified example. — RichieHindle, Dec 01 '11 at 16:47
Are the font-sizes known values? Can you do the math and work out the padding on the smaller font blocks? — Evan Davis, Dec 01 '11 at 17:42
@Mathletics: Not really. The HTML is being generated - imagine a PDF-to-HTML conversion program and that's roughly what we're talking about. (I also don't know in advance which fonts are being used.) — RichieHindle, Dec 01 '11 at 17:53
Dupe of http://stackoverflow.com/questions/3542090/how-to-make-div-fill-td-height — Chris Moschini, Jun 29 '12 at 04:57
what's the reason? maybe there is a different approach to this issue — Huangism, Nov 19 '13 at 20:24

ptriek · Answer 1 · 2011-12-01T19:33:41.290

2

Not perfect, but the closest I could get:

http://jsfiddle.net/gfPkV/14/

edited Dec 01 '11 at 19:33

answered Dec 01 '11 at 17:05

ptriek

9,040
5
31
29

Works great but, in the rare case that a user is zoomed in even a bit it's off again. – brenjt Dec 01 '11 at 17:52
@ptriek: Sadly the text is no longer aligned along the baseline. – RichieHindle Dec 01 '11 at 17:54
And would it be an option to add an extra div for the fill colour? See my updated link - this preserves baseline alignment (though still a bit messy) – ptriek Dec 01 '11 at 19:33
@ptriek: Lovely in Chrome, but broken in Firefox and IE. `position:relative`'s behaviour is undefined for ``, and Firefox ignores it. I'm not sure what IE thinks it's doing, but it's sure not right. :-) – RichieHindle Dec 02 '11 at 07:48

score 2 · Answer 2 · answered Dec 01 '11 at 19:37

2

Quick and dirty fix:

CSS

div {
    line-height:60px;
    height:60px;
    vertical-align:middle;
}

Demo: http://jsfiddle.net/2YbBg/

answered Dec 01 '11 at 19:37

AlienWebguy

76,997
17
122
145

Sadly the text is no longer aligned along the baseline. – RichieHindle Dec 02 '11 at 07:49

score 1 · Answer 3 · answered Dec 01 '11 at 17:48

1

I read once, that td does not report it's height. So any height: 100% or height:auto, etc.. won't work.

So my solution is here: http://jsfiddle.net/UGTYP/

It changes height of "pink" text to the height of "yellow" div with javascript.

answered Dec 01 '11 at 17:48

JercSi

1,037
1
9
19

Sadly, the text is no longer aligned along the baseline. – RichieHindle Dec 01 '11 at 17:51

Make the background-color of a
fill the enclosing

3 Answers3

Linked

Make the background-color of a fill the enclosing

3 Answers3

Linked

Make the background-color of a
fill the enclosing