html columns whose width automatically changes according to their content

Discussion in 'Web Design' started by erelsgl, Jul 24, 2012.

to remove all ads.
  1. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    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.
     
  2. erelsgl

    erelsgl New Member

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

    erelsgl New Member

    Messages:
    8
    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...
     
  4. LouTheDesigner

    LouTheDesigner New Member

    Messages:
    506
    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.
     
  5. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,670
    Why not?? After all it IS what they are meant to be used for.

    The TS wants fixed heights and variable widths based on content NOT widths based on the browser client window width.
     
    Last edited: Jul 29, 2012
  6. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,670
    So not too bad for off the cuff coding then :D :D


    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)!!!

    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.
     

Share This Page