How to adjust columns so there would be no empty spaces in the bottom of the second column?

1 Answer

Relevance
  • 7 years ago
    Favorite Answer

    HI There,

    You can try this you have to play around with your text to get what you want. No easy way I have found. You can change the "column-count" to 3 or more if that works better.

    Hope this helps,

    Al

    =======================

    <html>

    <head>

    <title>2 columns</title>

    <style type="text/css">

    .newspaper{

    -moz-column-count:2; /* Firefox */

    -webkit-column-count:2; /* Safari and Chrome */

    column-count:2;

    -moz-column-gap:20px; /* Firefox */

    -webkit-column-gap:20px; /* Safari and Chrome */

    column-gap:20px;

    }

    body {background-color:tan; color:#000000;}

    </style>

    </head>

    <body>

    <p> Note: Internet Explorer 9, and earlier versions, does not support the column-gap property</p>

    <div class="newspaper">

    Now is the time for all good men to come to the aid of their country.<br>

    Now is the time for all good men to come to the aid of their country.<br>

    Now is the time for all good men to come to the aid of their country.<br>

    Now is the time for all good men to come to the aid of their country.<br>

    </div>

    </body>

    </html>

    =======================================

Still have questions? Get your answers by asking now.