Display: table questions

[mikey_w]

I have some questions about display: table

1.) Must you use a row if there is just one?

2.) How does your browser determine the width of each of two columns?

In the code below, I can’t figure out how the widths are being set…

    <header id="masthead">
        <div id="company-info">
            <div id="brand">Mikey Consulting</div>
            <div id="tagline">Designing mobile websites...</div>
        </div>
        <address id="company-addy">
            (206) 555-1212<br />
            Seattle, WA
        </address>
    </header>

#masthead{
    display: table;
    width: 100%;
    line-height: 1.2;
}

#company-info,
#company-addy{
    display: table-cell;
}

3.) Any general advice to make my code responsive?

[ronpat]

@mikey_w

1.) Must you use a row if there is just one?

No.

@mikey_w

2.) How does your browser determine the width of each of two columns?

IF a table width is specified AND table-layout:fixed is applied, then the cells are of equal widths regardless of content.
IF no table width is applied, then the cells hug their contents.
IF a table width is specified and the default table-layout is used, the width of the cells is more-or-less proprtional to the width of the contents. Cells with wider contents being given more space at the right and left sides.

@mikey_w

3.) Any general advice to make my code responsive?

No.

[mikey_w]

@ronpat

IF a table width is specified AND table-layout:fixed is applied, then the cells are of equal widths regardless of content.
IF no table width is applied, then the cells hug their contents.
IF a table width is specified and the default table-layout is used, the width of the cells is more-or-less proprtional to the width of the contents. Cells with wider contents being given more space at the right and left sides.

It seems your last rule would apply, but that is not what I am seeing…

This is more of a nitpicking question, but just trying to be sure I understand how things work.

[ronpat]

I recommend that you add visible outlines or borders to the cells and watch how the widths change in relation to the width of the contents.

[mikey_w]

@ronpat

I recommend that you add visible outlines or borders to the cells and watch how the widths change in relation to the width of the contents.

I am using FireBug and I am also “eyeing” things.

The text on the left and right is fairly short, but I thought it looked fairly similar in length.

I guess I am getting bogged down with minor details.

[SamA74]

@mikey_w

The text on the left and right is fairly short, but I thought it looked fairly similar in length.

The text on the right is shorter than the text on the left, so the right cell is smaller.
In addition to ronpat’s explanation, you can also set cell widths explicitly if you require it:-

#company-addy { width: 30%; }

[ronpat]

Yes, but…

Widths assigned to table-cells are interpreted as min-width… they are “only a suggestion”, a starting point, and can change if content pushes them to change unless table-layout:fixed and a width is assigned to the display:table element. In that vein, the magic behind Paul’s ultimate sticky footer (that uses table-rows/cells) is the ability to assign a table-cell a height of 1px and rely on content to force it to extend.

[mikey_w]

@SamA74

The text on the right is shorter than the text on the left, so the right cell is smaller.

I guess, but I wasn’t expecting that much of a difference in the two cells - one looks twice as wide as the other.

@SamA74

In addition to ronpat’s explanation, you can also set cell widths explicitly if you require it:-

#company-addy { width: 30%; }

Yes, I tried that after seeing things looked unbalanced.

[SamA74]

@mikey_w

one looks twice as wide as the other.

Well if you measure the text in your image, the tagline is about 200px and your phone number is about 110px, so yes, it’s about twice as wide

@mikey_w

Yes, I tried that after seeing things looked unbalanced.

OK, but bear in mind what ronpat said about setting width too. Set table-layout: fixed on the parent to have full control.

[mikey_w]

@ronpat

Widths assigned to table-cells are interpreted as min-width… they are “only a suggestion”, a starting point, and can change if content pushes them to change unless table-layout:fixed and a width is assigned to the display:table element. In that vein, the magic behind Paul’s ultimate sticky footer (that uses table-rows/cells) is the ability to assign a table-cell a height of 1px and rely on content to force it to extend.

Not sure what the reference to Paul is?

[ronpat]

@mikey_w

Not sure what the reference to Paul is?

It is not a reference to Paul, but to his Ultimate Sticky Footer design that uses CSS table “elements” and depends on the standard table behavior whereby a cell with a height of 1px will extend to fit it contents.

It’s a practical, working example of that table behavior.

[SamA74]

@SamA74

OK, but bear in mind what ronpat said about setting width too. Set table-layout: fixed on the parent to have full control.

When I think about it, that default behaviour, where width acts as min-width may be useful in this case, making the layout responsive. It will space out the elements on the wide screen, then make more effective use of space when things get tight.

[mikey_w]

@SamA74

When I think about it, that default behaviour, where width acts as min-width may be useful in this case, making the layout responsive. It will space out the elements on the wide screen, then make more effective use of space when things get tight.

You lost me on what you are advising…

[SamA74]

@mikey_w

You lost me on what you are advising…

You maybe don’t need to use table-layout: fixed when specifying cell width, it may work better without. Try it either way, see what works best.