Question

I am not a CSS expert (mainly because I haven’t had the need to use much HTML/CSS stuff lately), so I came up with the following style/divs to create a 4 column layout:

    <style type="text/css">
        <!--
        .columns:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        * html .columns {height: 1%;}
        .columns{ display:inline-block; }
        .columns{ display:block; }
        .columns .column{
          float:left;
          overflow:hidden;
          display:inline;
        }
        .columns .last{ float:right; }
    
        .col4 .first{ left: auto;width:25%; }
        .col4 .second{ left: auto;width:25%; }
        .col4 .third{ left: auto;width:25%; }
        .col4 .last{ left: auto;width:25%; }
        -->
    </style>

note: most of this stuff comes from this google result, I just adapted it to 4 columns.

The HTML then looks like this:

<div class="columns col4">
 <div class="column first”> SOME TEXT  </div><!-- /.first -—>
 <div class="column second”> MORE TEXT</div><!—- /.second -—>
 <div class="column third”> SOME MORE TEXT </div><!—- /.third -->
 <div class="column last”> SOME LAST TEXT </div><!-- /.last -—>
</div><!-- /.columns -->

Ok, I’ve simplified that a bit (there’s a small image and some < h2 > text in there too) but the thing is that I’d like to add some space between the columns. Here’s how it looks now:

Do you have any idea what CSS property should I touch?

note: If I add margin or padding, one column shifts down because (as I understand it) it doesn’t fit. There might be other CSSs as well, since this came in a template (I have been asked for this change, but I didn’t do any of this, as usual).

Thanks for any insight.

Answer 1

You need to add padding to the columns. But when you do that, you also need to subtract the same amount from the width property. This i because of the box-model.

.col4 .first{ left: auto;width:24%; padding-right:1% }
.col4 .second{ left: auto;width:24%; padding-right:1% }
.col4 .third{ left: auto;width:24%; padding-right:1% }
.col4 .last{ left: auto;width:24%; padding-right:1% }