SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2011
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS3 Multi-column module: let text flow over columns

    Hello,

    I'm working in a fixed height context (as in "I don't want the height of my container to expend). I am using a multi-column approach to display text. However, I can't always predict the length of the text. Usually, three columns is ok. But what if it's not? Is there a CSS way to automatically create a fourth column that will receive the extra amount of text?

    Cheers.


  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    According to the W3C's multi-column spec it seems if you don't set a number of columns, but instead column-width, then the size of the container determines the number of columns.

    However I don't think it would be creating horizontal scrollbars in order to make the container wider in order to fit more columns. Instead, likely the user's screen width determines the width of the container, which might not be wide enough in some cases. If the screen is too small, meaning the container for the columns is too small, you'll get maybe only two columns and much longer ones, which hits your height issue.

    You could possibly allow the columns to get taller as a default and have Javascript determine if the column container needs to be manually set wider in order to produce more columns. It's not elegant but on the other hand if you're using JS for that then you could then also incorporate support for browsers who don't even do multi-col anyway. Which maybe you're already doing.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •