layOut with header and body

HTML & CSS
1

I have a layOut at http://dot.kr/x-test/headerBody5.php.
It is using "table-row and table-cell.

Do you think it is well made in CSS?
Can you make it without "table-row and table-cell?
Is there any redundancy or something version-up is needed?

2

Oh, the yellow box is not vertically-middled in fireFox!!!
It is vertically middled in chrome.

I have one more question about this.

How can I make it vertically middled in both fireFox and chrome?

3

The yellow box is not within a table-cell with the property {vertical-align:middle}

Instead, it is within a table-row

<div style="display:table-row;vertical-align:middle;padding:5px;">

Unfortunately, none of these properties (vertical-align and padding) apply to a table-row.

ASIDE:

  • {border-collapse: collapse;}
    only applies to a table or display:table. Why do you assign it to ALL objects with the universal selector? That’s useless and clutters up the code.

A height cannot be assigned to a table-row.

 <div style="display:table-row;height:100px;">

Inline styles are redundant and inefficient. Apply styles with classes and CSS instead.

4

Theoretically height should not apply to table-rows but browsers do implement the height for the css property display:table-row and in some cases it can save on adding the actual mark up for display:table-cell.

Vertical-align however does not apply to table-rows and you would need the inner display:table-cell element in the mark up and apply the vertical align to that.

1 Like