html columns whose width automatically changes according to their content

erelsgl · 07-25-2012, 05:22 PM

Quote:

Originally Posted by PixelPusher

Even Width
Setting even width is simple, use percentage based values for your column widths.

Even Height
Setting an even height for all is not too difficult either. Use javasctipt/jquery to check the columns and set their height based on the tallest one.

Thank you for the detailed code sample (which I put here: http://jsfiddle.net/57b39/7/ )! However, that is not exactly what I need. I don't want the columns to be equal width, on the contrary, I want their width to adjust according to their content, so that columns with more content are wider, and columns with less content are narrower. This way, the height of the content will be approximately balanced.

This is easily achieved by a table, IF each td element contains exactly one paragraph. Can it be done without a table?

**PixelPusher** · 07-25-2012, 07:01 PM

Quote:

Originally Posted by chrishirst

Why? To make an arbitrary decision about the HTML structure without knowing what the data to be displayed actually is seems a little rash.

Using a jquery framework for a simple task like setting equal height columns is always something of an overkill.

Eight or nine years ago I wrote 13 lines of javascript that did just that without needing the extra overhead of jquery.

He did mention he was having three columns with paragraphs in each. I assumed this was a layout for the main content of his page. If that is the case, my point stands. If not, then I stand corrected. Tables should not, in fact never, be used as a main structural basis for a website's content.

jQuery overkill? Just for this perhaps. I see your point. However, there could well be other aspects of his site that he has not mentioned that would require js. In which case he is in prime standing.

Plus, pulling the core from a CDN really doesn't create that much overhead (~60K).

chrishirst · 07-25-2012, 07:02 PM

Quote:

I want their width to adjust according to their content, so that columns with more content are wider, and columns with less content are narrower. This way, the height of the content will be approximately balanced.

WHY???????

That sounds like the WORST possible example of a readable or usable layout I can imagine.

There could exist a situation there where a "column" may be only one or two words wide!!!

It is going against the natural reading habit/methods/teaching/rules of ALMOST EVERY LANGUAGE ON THE PLANET!!!!!

Now if your documents are going to be Tategaki, then fine go ahead, but if you want them to be read in ANY western language, I would rethink the idea.

**PixelPusher** · 07-25-2012, 07:15 PM

Quote:

Originally Posted by chrishirst

WHY???????

That sounds like the WORST possible example of a readable or usable layout I can imagine.

There could exist a situation there where a "column" may be only one or two words wide!!!

Exactly!

OP:
The problem with your table solution is, like Chris stated, if you have a paragraph large enough it will crush the other two cells to a state that is barely readable. Meaning, you need to set width on the cells to limit this. Hence, back to my example.

**PixelPusher** · 07-25-2012, 07:18 PM

Quote:

Originally Posted by erelsgl

Thank you for the detailed code sample (which I put here: http://jsfiddle.net/57b39/7/ )! However, that is not exactly what I need. I don't want the columns to be equal width, on the contrary, I want their width to adjust according to their content, so that columns with more content are wider, and columns with less content are narrower. This way, the height of the content will be approximately balanced.

This is easily achieved by a table, IF each td element contains exactly one paragraph. Can it be done without a table?

Your welcome, but wouldn't you rather have a consistent appearance to your site? Continually changing column widths seems odd to me

erelsgl · 07-26-2012, 04:36 AM

Quote:

Originally Posted by chrishirst

WHY???????.... There could exist a situation there where a "column" may be only one or two words wide!!!

Because I want the height to be as small as possible. The layout is used not only for web, but also for print. The more height - the more pages needed for printing it.

If I set the column width to a constant, then in some cases one column will be very high, and will spill over to a new page, that will contain only the continuation of that column. I think it would be more convenient to make the column wider, so that it will all fit in a single page.

chrishirst · 07-26-2012, 10:21 AM

Laying out for print documents and designing layouts for web documents are different disciplines and making a dogs breakfast of your web layout should NEVER take precedence over a usable HTML document layout

If you need a different print layout using CSS, then have a different style sheet for print using the media="print" attribute value.

You can also use media queries to define different rule sets.

ALSO

page-break rules can be used in print style rulesets, whereas they do not have any effect in screen rulesets.

**PixelPusher** · 07-26-2012, 03:16 PM

Quote:

Originally Posted by chrishirst

Laying out for print documents and designing layouts for web documents are different disciplines and making a dogs breakfast of your web layout should NEVER take precedence over a usable HTML document layout

If you need a different print layout using CSS, then have a different style sheet for print using the media="print" attribute value.

You can also use media queries to define different rule sets.

ALSO

page-break rules can be used in print style rulesets, whereas they do not have any effect in screen rulesets.

Couldn't have said it better myself.

erelsgl · 07-27-2012, 10:06 AM

Quote:

Originally Posted by chrishirst

If you need a different print layout using CSS, then have a different style sheet for print using the media="print" attribute value.

Great insight, thanks!

So, my original question pertains to this print-specific CSS: what should I put in that CSS, in order to have the column widths adjust to their content, and achieve minimum height?

chrishirst · 07-27-2012, 04:33 PM

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.

07-26-2012, 10:21 AM	#17
chrishirst Diamond Member Join Date: May 2012 Location: Blackpool Posts: 1,280	Laying out for print documents and designing layouts for web documents are different disciplines and making a dogs breakfast of your web layout should NEVER take precedence over a usable HTML document layout If you need a different print layout using CSS, then have a different style sheet for print using the media="print" attribute value. You can also use media queries to define different rule sets. ALSO page-break rules can be used in print style rulesets, whereas they do not have any effect in screen rulesets. PixelPusher likes this. __________________ When the mind is enlightened, the spirit is free and the body matters not.

07-27-2012, 04:33 PM	#20
chrishirst Diamond Member Join Date: May 2012 Location: Blackpool Posts: 1,280	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. erelsgl likes this. __________________ When the mind is enlightened, the spirit is free and the body matters not.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode