Menu icon Foundation
Urgent help information inside

Hello people!
I am trying to make 4 Columns on 1 row with about 50px spacing between them and starting from left corner without spacing from side and evens out to the right corner . it seems i cant get it to fic this is what i use atm.
I want a 1 px border around them aswell but when i do my own css for it it juts makes em float togheter and thats what ive been stuck with for about 4 hours. and i just cant find a solution so asking for help.

<div class="row">
    <div class="medium-3 columns" style="borde: 1px solid #272727; background-color: #fff">Content</div>
    <div class="medium-3 columns" style="borde: 1px solid #272727; background-color: #fff">Content</div>
    <div class="medium-3 columns" style="borde: 1px solid #272727; background-color: #fff">Content</div>
    <div class="medium-3 columns" style="borde: 1px solid #272727; background-color: #fff">Content</div>
</div>
            

         

helpcolumnsfloating element

Hello people!
I am trying to make 4 Columns on 1 row with about 50px spacing between them and starting from left corner without spacing from side and evens out to the right corner . it seems i cant get it to fic this is what i use atm.
I want a 1 px border around them aswell but when i do my own css for it it juts makes em float togheter and thats what ive been stuck with for about 4 hours. and i just cant find a solution so asking for help.

<div class="row">
    <div class="medium-3 columns" style="borde: 1px solid #272727; background-color: #fff">Content</div>
    <div class="medium-3 columns" style="borde: 1px solid #272727; background-color: #fff">Content</div>
    <div class="medium-3 columns" style="borde: 1px solid #272727; background-color: #fff">Content</div>
    <div class="medium-3 columns" style="borde: 1px solid #272727; background-color: #fff">Content</div>
</div>
            

         
dims over 5 years ago

for 50 pixel gutter you will have to edit the following in settings.scss

$column-gutter: rem-calc(30);

the above would affect the cloumns globally. if you want the spacing to be 50px only on this page you can add another class with padding

the spelling for border is wrong in your custom style.
try to remove left passing from first column and right padding from right column

<div class="row">
    <div class="large-3 medium-3 columns" style="border: 1px solid #272727; background-color: #fff; padding-left:0 !important">Content</div>
    <div class="large-3 medium-3 columns" style="border: 1px solid #272727; background-color: #fff">Content</div>
    <div class="large-3 medium-3 columns" style="border: 1px solid #272727; background-color: #fff">Content</div>
    <div class="large-3 medium-3 columns" style="border: 1px solid #272727; background-color: #fff; padding-right:0 !important">Content</div>
</div>

do have a link to show your current html or whosh shows what you want to achieve

Rafi Benkual over 5 years ago

@bimal - I think he only uses css as he is also using in-line styles

@Jonas - by default there is no margin between columns as that is the desired behavior. I modified your code to 2 columns and added margin in between columns http://codepen.io/rafibomb/pen/bmfzd

You could also use block-grid next time http://foundation.zurb.com/docs/components/block_grid.html