html columns whose width automatically changes according to their content

[Phreaddee]

what should I put in that CSS, in order to have the column widths adjust to their content, and achieve minimum height?

your print css is primarily so people can read it. the logic behind having columns seems illogical...consider a paragraph that spreads across the entire page will have the minimum height possible, and all three "columns" should fit the dimensions of the page easily enough, and at least it will be legible that way.

 

[erelsgl]

your print css is primarily so people can read it. the logic behind having columns seems illogical....

There are 3 different types of content, so I put each of them in a different column.

 

[erelsgl]

This is off the cuff thinking and not actually tried and tested.

Give the html and body elements 100% height to make them fit to the content length rather than stopping at the viewport height/length.

Set display: table; with a 100% width and height on a "wrapper" element.
Set display: table-row on a child element of "wrapper" with 100% height, Put your "columns" as child elements of this inner element, with 100% height and display: table-cell;.

That should be a starting point at least. Not forgetting to allow for padding and margins in the 100% length/height calculations.

Good! That gives the same effect of tables, without tables: http://jsfiddle.net/RJa2k/51/

However, the leftmost column in the second table is still too narrow...

 

[LouTheDesigner]

Ok. I won't even use tables for data. Have you guys gone crazy?

http://cssgrid.net/

Download their CSS and you have a website that is fluid down to mobile. NO TABLES, just clean divs with percentage-based widths.

 

[chrishirst]

Ok. I won't even use tables for data. Have you guys gone crazy?

Why not?? After all it IS what they are meant to be used for.

http://cssgrid.net/

Download their CSS and you have a website that is fluid down to mobile. NO TABLES, just clean divs with percentage-based widths.

The TS wants fixed heights and variable widths based on content NOT widths based on the browser client window width.

 

[chrishirst]

Good! That gives the same effect of tables, without tables: http://jsfiddle.net/RJa2k/51/

So not too bad for off the cuff coding then


That is what display: table is supposed to do, make a structure emulate the behaviour of tables, It might even stop the style police banging on about how tables are "bad" (even when used for tabular data)!!!

However, the leftmost column in the second table is still too narrow...

That is always likely to happen, try settiing a min-width (maybe 33.3%), and allow for padding, margins and borders if or as required on the elements.

Or...

HTML5 has custom data attributes with which you could use CSS attribute selectors to target specific elements.