CODEWITHSUNDEEP
csszurb-foundation
Mikkel
Mikkel

Reputation: 1811

Set space between columns, so each column is same size (using foundation)

I'm trying to make some space between my columns, but can't seem to find the right solution.

Code:

<div class="content wrapper">
<div class="row">
    <div class="red window border-right column small-12 medium-3">
        Section 1
    </div>
    <div class="green window border-left border-right column small-12 medium-3">
        Section 2
    </div>
    <div class="blue window border border-left border-right column small-12 medium-3">
        Section 3
    </div>
    <div class="yellow window border-left column small-12 medium-3">
        Section 4
    </div>
</div>
</div>

Have tried setting classes as border-right, border-left on the columns, but then, the left and right column will be bigger in size than the two in the middle (I'm using middle-3, so have 4 columns).

Image:

enter image description here

Css:

.window {
background-color: white;
height: 450px;
}

.window.border-left {
border-left: 8px solid #EAEDEE;
}

.window.border-right {
border-right: 8px solid #EAEDEE;
}

.yellow {
background-color: yellow;
padding: 1rem;
}

.red {
background-color: red;
padding: 1rem;
}

.blue {
background-color: cadetblue;
padding: 1rem;
}

.green {
background-color: green;
padding: 1rem;
}

Is this possible, without applying it global?

Upvotes: 0

Views: 94

Answers (4)

micheal jams
micheal jams

Reputation: 7

try this...

in a include your head part this link. this link is zurb foundation css. https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation-flex.css

Upvotes: 0

Jainam
Jainam

Reputation: 2660

please you can try this, i hope you need this.

CSS:

.content.wrapper {
  float: left;
  width: 100%;
}
.row {
  float: left;
  margin: 0;
  width: 100%;
}
.window {
background-color: white;
height: 450px;
}

.window.border-left {
border-left: 8px solid #EAEDEE;
}

.window.border-right {
border-right: 8px solid #EAEDEE;
}

.yellow {
background-color: yellow;
padding: 1rem;
}

.red {
background-color: red;
padding: 1rem;
}

.blue {
background-color: cadetblue;
padding: 1rem;
}

.green {
background-color: green;
padding: 1rem;
}  
.border-right, .border-left {
  float: left;
  width: 25%;
}

See Bootply Updeted Demo

Upvotes: 1

Carol McKay
Carol McKay

Reputation: 2424

.row {

.row { display:flex; justify-content:space-between; }

`.row div {
flex:0 1 23%;
}`

be sure to use http://autoprefixer.github.io/

Upvotes: 0

vignesh
vignesh

Reputation: 1011

Could please try this code

<div class="content wrapper">
    <div class="row" data-equalizer="">
        <div class="column small-12 medium-3">
            <div class="red window border-right" data-equalizer-watch="">Section 1</div>
        </div>
        <div class="border-right column small-12 medium-3">
            <div class="green window border-left" data-equalizer-watch="">Section 2</div>
        </div>
        <div class="border-left border-right column small-12 medium-3">
            <div class="blue window border" data-equalizer-watch="">Section 3</div>
        </div>
        <div class="column small-12 medium-3">
            <div class="yellow window border-left" data-equalizer-watch="">Section 4</div>
        </div>
    </div>
</div>

I have modified only the HTML part. you can use the same css

Upvotes: 0

Related Questions