Grow your CSS skills. Land your dream job.

multiple column

  • # July 10, 2013 at 10:38 am

    Hi,

    How can I set height to multi-column?

    I want to have a code that has a fixed measurement for height [140px] and width [145px], but can have as much columns as needed for the text…

    somehow if i put the code ‘height: 140px’, it doesn’t works…

    .column {
    margin-left: 150px;

    -webkit-column-width: 145px;
    -webkit-column-gap: 2.5px;

    -moz-column-width: 145px;
    -moz-column-gap: 2.5px;

    column-width:145px;
    column-gap:2.5px;

    if someone can helps would be great!

    # July 10, 2013 at 10:43 am

    Don’t think it works that way.

    You have to tell it how many columns you want as I recall.

    # July 10, 2013 at 10:53 am

    yes, i’m very aware of the option to set how many columns i want. but with this, in the end, i have a ‘height flexible’ code….

    and i don’t want either a ‘height flexible’ or a ‘width flexible’ website, but a ‘column-count flexible’ website….so it can expand as much text is uploaded inside the columns….without loosing the design of the columns [140px x 145px]

    i think it must have a way to do that….

    # July 10, 2013 at 11:07 am

    >i think it must have a way to do that….

    Not using the column-count methodology AFAIK.

    # July 10, 2013 at 2:02 pm

    ok! AFAIK i’m not using it…

    # July 10, 2013 at 2:30 pm

    OK…but if you aren’t then the other ‘column’ properties mean nothing, I believe.

    http://css-tricks.com/almanac/properties/c/columns/

    # July 10, 2013 at 5:38 pm

    Have you tried something like this?

    .wrapper { columns: 15em; }

    This should give you column-count flexibility.

    # July 10, 2013 at 10:05 pm

    thanks hugogiraudel

    i’ve put ‘height: 140px’ and somehow it started to work…

    i still don’t have full control of the columns, but so far, i achieved what i needed.

    thanks!

    # July 11, 2013 at 10:04 am

    No problem.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".