Skip navigation
blueskyfree1
Currently Being Moderated

How do you format text into columns?

May 21, 2013 5:30 AM

Hello,

 

I would like to format text into 3 separate columns using css. 

 

Thanks.

 
Replies
  • Currently Being Moderated
    May 21, 2013 5:41 AM   in reply to blueskyfree1
     
    |
    Mark as:
  • Currently Being Moderated
    May 21, 2013 5:43 AM   in reply to blueskyfree1

    How you would do this will depend on what it is you want to achieve with those three columns.

     

    The easiest way would be to have three floated left (or right) containers, e.g.,

     

    <style type="text/css">

    .column {

    width:250px;

    float:left;

    margin-right:15px;

    }

    .column + .column + .column {

    margin-right:0;

    }

    </style>

    ...


    <div class="column">

    <p>This is column1</p>

    </div>

    <div class="column">

    <p>This is column2</p>

    </div>

    <div class="column">

    <p>This is column3</p>

    </div>

     
    |
    Mark as:
  • Currently Being Moderated
    May 21, 2013 5:55 AM   in reply to blueskyfree1

    For example:

    div {
            width: 900px;
            -moz-column-count: 3;
            -webkit-column-count: 3;
            column-count: 3;     
    }
    

    There are many other related CSS properties column-width, column-gap, column-rule, etc http://www.w3.org/TR/css3-multicol/

     

    (This can also be done using Javascript and that will work on all browsers unlike CSS above.)

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    May 21, 2013 6:18 AM   in reply to kennethkawamoto2

    I have tested this on my systems and found it degrades gracefully in IE10 & Opera 12.15. Looks ok in Safari, Chrome and FF.

     
    |
    Mark as:
  • Currently Being Moderated
    May 21, 2013 6:29 AM   in reply to blueskyfree1

    With which method? The CSS-only method has options specified on the link Kenneth posted. The CSS/HTML method that I posted would allow you to do that just by editing the CSS widths, e.g.

     

    <style type="text/css">

    .column {

    width:20%;

    float:left;

    }

    .column + .column {

    width:60%

    }

    .column + .column + .column {

    width:20%;

    }

    </style>

     

    The real difference is that in my method, you must populate each of the columns manually. In the CSS-only method, the columns are created and formed automatically from a single stream of text.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points