Centers content boxes of arbitrary height, both horizontally and vertically.
div.center div.center-cell div.center-box div
.center-box {
width: 80%;
}
Expands naturally to the height of its content.
.center-box {
width: 80%;
height: 80%;
}
Also takes a fixed height.
.center-box {
width: 80%;
height: 80%;
}
Pushes the whole construct bigger when there is too much content.
blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb
.center-box {
width: 80%;
height: 80%;
}
Which is fixable with class layer
. Using .layer
requires a height declaration on .center-box
.
blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb
.tab {
position: absolute;
height: 20px;
top: -20px;
}
Things can easily be positioned outside of the .center-box with a little positioning.
div.center div.center-cell div.center-box iframe
This test shows that iframes render with a minimum height when placed inside a table-cell
.
Also, they don't respect margin: auto.
To fix those problems the iframe can be wrapped in a div. It seems to get the message. The advantage is it gives an extra 'hook' to tackle IE with. The disadvantage is that the iframe always has to have width/height 100%, and the width height you want must be set on th wrapper div.
div
s do not respect % height declarations inside a table-cell
when their content becomes higher than the cell: they push the table bigger. At least they behave the same way in WebKit and FireFox.
It may actually be desired behaviour, but if not there is a fix. The .center-box
div has position, so declare it's content as a layer ( { position: absolute; height: 100%; width: 100%; }
). The caveat is that the height of .center-box must now be defined, because it will no longer self-adjust to its absolutely positioned content.
blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb
blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb