Intrinsic sizing

Some text [...]

Sleuthy archer surveys the land tracking his client's target.

Some more text [...]

Taming table column widths

With table-layout: fixed

If we don’t… specify a cell width, they will be assigned one that depends on their contents. Notice how the cell with the more content here is much wider.
If we don’t… specify a cell width, they will be assigned one that depends on their contents. Notice how the cell with the more content here is much wider.
All rows take part in calculating the widths, not just the first one. Notice how the dimensions here are different than the previous example.
If we specify a width, it will not always be followed. I have a width of 1000px …and I have a width of 2000px. Because there’s not enough space for 3000px, they are reduced proportionally, to 33.3% and 66.6% of the total width.
If we prevent word wrapping, the table can become so wide it grows beyond its container. …and text-overflow: ellipsis doesn’t help either.
Large images and blocks of code can also cause the same issue.

Styling by sibling count

Fluid background,
fixed content

Heading

Spicy jalapeno bacon ipsum dolor amet tempor irure ut mollit est. Aute ut non filet mignon turkey. Short ribs beef ribs ex ea duis, ut fatback hamburger short loin burgdoggen alcatra meatball incididunt. Laborum eiusmod veniam, fugiat jerky enim magna labore.

Another heading

Kevin veniam short ribs, non beef ribs strip steak ullamco. Laborum exercitation tenderloin, et eu filet mignon strip steak cow boudin chuck biltong leberkas ea dolore ullamco. Alcatra ex t-bone in laborum sunt elit beef. Eiusmod officia minim velit ex picanha shank ea pork jerky bacon ribeye strip steak. Bresaola culpa turkey cow mollit leberkas kevin biltong sausage.

Vertical centering

Sticky footers