1

Is it possible to prepare different styles that change page layout depending on the information if the content of a page is "long". I want to enable CSS3 columns when content is long and disable them when content is short.

How do you define "long"? It's open - it can be a certain amount of paragraphs, a number of pixels etc.

A similar media query that can change styles depending on the browser window width:

@media only screen and (min-width: 1278px) {
    /* code for wide-screen window */
}

I want to use pure CSS and no JavaScript if possible (with JavaScript it's simple - I'd just add a class after measuring page offsets).

Wiktor
  • 13
  • 2
  • Since CSS has no way of knowing what exactly constitutes "long" or "short" content, no, you can't do this with pure CSS. – BoltClock Feb 06 '13 at 16:24
  • Ive no experience using columns but you could maybe do something like put all content in one column where the column item (or containing div) is set to whatever length you consider to be long enough not to be multi-column, set the width, then set the number of columns to auto. Then as content becomes longer, instead of pushing down it pushes into a new column... AS I say I've not worked with columns and not even CSS for some time so I dont know if this is possible to do like this... – Toby Feb 06 '13 at 16:28
  • Well I was thinking about something like parent selector: http://stackoverflow.com/questions/2000582/css-selector-for-foo-that-contains-bar combined with information like "contains 15 p elements" but I don't want to point to a specific direction because for now it's a dead end. – Wiktor Feb 06 '13 at 16:30

1 Answers1

1

As far as I know there is no way with a media query

The w3 specification for the height attribute specifies that is is not for actual content-height but rather than browser height, similar to the width attribute.

I would go with a quick JS solution exactly as you described.

Martin
  • 46
  • 2