Add inner-marging to a 4 columns CSS
- by Martín Marconcini
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.
