How to span through css columns

Question

I have created 3 columns using css, and I want to place some text within the same div that spans the 3 columns on all browsers (Firefox is giving me trouble.)

Here is a fiddle I created: https://jsfiddle.net/syyar62b/3/

#left-area {
    -moz-column-count: 3;
    column-count: 3;
    -moz-column-gap: 60px;
    }
.span-3-columns {
    column-span: all;
    -webkit-column-span: all;
    -moz-column-span: all;   
    }  

<div id="left-area">
<div class="span-3-columns">
I want this to go across the 3 colums at the top, yet remain inside of the left-area id.
</div>
content content content content content content content content 
</div>

A textual representation of what I'm looking for would look like this:

This line is spans all 3 columns
content      content     content

In which browser you are checking? because for me it is working fine on firefox. If you want to add in chrome try to add -webkit-column-count:3; — aavrug
– aavrug, Commented Dec 29, 2016 at 3:29
I'm using the latest firefox. But I see the text in the "span-3-columns" class is only displaying in the first column and not spanning all 3. — osakagreg
– osakagreg, Commented Dec 29, 2016 at 3:31
@aavrug, he modified his fiddle after posting the question with the code provided in the answer by Bla. It's working fine from here, too. — Vince
– Vince, Commented Dec 29, 2016 at 3:38
@Vince Ok but this code is still not working for chrome so I think the code must have the webkit part. — aavrug
– aavrug, Commented Dec 29, 2016 at 3:45
@aavrug I forked his fiddle, removed the vendor-specific prefixes, and added column-span: all to .span-3-columns and it's working for me on Chrome: jsfiddle.net/VAggrippino/syyar62b/5 JSFiddle doesn't do anything like autoprefixer or prefixfree, does it? I usually use CodePen. — Vince
– Vince, Commented Dec 29, 2016 at 3:52

Bla... · Accepted Answer · 2016-12-29 04:20:43Z

2

First there is a typo in your fiddle, it should be .span-3-columns instead of .span-3-colums.

You can use this:

.span-3-columns {
    column-span: all;
    -webkit-column-span: all;
    -moz-column-span: all;
}

Note: Still not supported on Firefox, as of 29/12/2016.

edited Dec 29, 2016 at 4:20

answered Dec 29, 2016 at 3:32

Bla...

7,2887 gold badges31 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

osakagreg Over a year ago

Thanks. I corrected the spelling error. But it still won't span all 3 columns. jsfiddle.net/syyar62b/3

Bla... Over a year ago

It seems like this feature is still not supported on firefox.. :)

ab29007 Over a year ago

See the browesr support: developer.mozilla.org/en-US/docs/Web/CSS/column-span

Vince · Accepted Answer · 2016-12-29 04:32:17Z

1

Update: This works, but the answer by Bla is better...

Update #2: It looks like the answer by Bla isn't supported under Firefox. So, I guess my solution is okay after all :P

You can wrap it in a container element, position: relative, with padding at the top, then absolutely position that span-3-columns block within the padding:

.left-area-container {
  position: relative;
  padding-top: 4em;
}
#left-area {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 60px;
     -moz-column-gap: 60px;
          column-gap: 60px;
}

.span-3-columns {
  background-color: #ffe;
  color: red;
  height: 4em;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

<div class="left-area-container">
  <div id="left-area">
    <div class="span-3-columns">
      I want this to go across the 3 colums at the top, yet remain inside of the left-area id.
    </div>
    1content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  </div>
</div>

edited Dec 29, 2016 at 4:32

answered Dec 29, 2016 at 3:35

Vince

4,3223 gold badges38 silver badges59 bronze badges

6 Comments

osakagreg Over a year ago

In Firefox, by removing -moz-column-count: 3; (as you did above) it destroys the 3 columns.

Vince Over a year ago

@osakagreg I'm sorry about that. I guess I take CodePen's autoprefixer feature for granted. I've updated my answer with the real CSS.

osakagreg Over a year ago

Unfortunately, that still doesn't do it. I copied that over in Firefox, and the red text still sits in the first column, and does not span all 3 columns.

Vince Over a year ago

@osakagreg I messed up. I copied and pasted from the wrong place and had pasted in the non-working solution that used column-span. Now it has been updated properly. To make things a little easier, I've also created a CodePen with the code and tested it in both FF and Chrome: codepen.io/VAggrippino/pen/mONrGE If you get the code from there, don't forget to click the menu in the upper right hand corner of the CSS panel and click "View Compiled CSS" before pasting into your project.

Vince Over a year ago

@osakagreg You're right. If you don't object to a little bit of Javascript, you could use it to determine the height of .span-3-columns and adjust the padding of the container accordingly, but I can't think of another way. You could always go back to basics with a table-based layout :P This is officially a bug in Firefox, but they've known about it for more than 6 years and it hasn't been assigned to anyone to fix it... kinda disappointing.

|

nashcheez · Accepted Answer · 2016-12-29 07:36:09Z

0

What are you trying to achieve here is possible using the CSS 3 specifications column-gap & column-width which make it possible to define the gap between columns.

Popular browsers have started supporting the same (-webkit-column-width, -webkit-column-gap, -moz-column-width, -moz-column-gap are all supported).

So the widths and gaps can be written in the following way:

#columns {
  -webkit-column-width: 220px;
  -webkit-column-gap: 15px;
  -moz-column-width: 220px;
  -moz-column-gap: 15px;
  column-width: 220px;
  column-gap: 15px;
}

I have made a fiddle which shows a working example. Works perfectly on Chrome, Firefox and Safari.

https://jsfiddle.net/nashcheez/3cf9qrap/3/

answered Dec 29, 2016 at 7:36

nashcheez

5,1931 gold badge30 silver badges54 bronze badges

Comments

osakagreg · Accepted Answer · 2017-01-03 17:57:43Z

@vince You are correct, that the solution involves a little bit of js, and that the problem is a reported bug in Firefox.

Your last comment about adding some js, is exactly what a friend of mine did. The js watches the size of the spanned div and then adjusts the padding of the main container.

You can see it in action and view the source here: http://codepen.io/gpercifield/pen/PbMQmO/

html

<body onresize="myFunction()">
<div class="left-area-container" id="main">
<div id="left-area">
    <div class="span-3-columns" id="spanDiv">
        This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.
        <hr>
    </div>
    <div class="box" style="height:194px;">asdf</div> <div class="box" style="height:264px;">asdf</div> <div class="box" style="height:134px;">asdf</div> <div class="box" style="height:379px;">asdf</div> <div class="box" style="height:198px;">asdf</div> <div class="box" style="height:187px;">asdf</div> <div class="box" style="height:125px;">asdf</div> <div class="box" style="height:364px;">asdf</div> <div class="box" style="height:378px;">asdf</div> <div class="box" style="height:357px;">asdf</div> <div class="box" style="height:204px;">asdf</div> <div class="box" style="height:243px;">asdf</div> <div class="box" style="height:58px;">asdf</div> <div class="box" style="height:135px;">asdf</div> <div class="box" style="height:187px;">asdf</div> <div class="box" style="height:383px;">asdf</div> <div class="box" style="height:394px;">asdf</div> <div class="box" style="height:213px;">asdf</div> <div class="box" style="height:55px;">asdf</div> <div class="box" style="height:48px;">asdf</div> 
</div>
</div>
<script>
    /*Function watches the height of the spanned div and then adjusts the padding in the main div*/
function myFunction() {
   var clientHeight = document.getElementById('spanDiv').offsetHeight;
   console.log(clientHeight);
   newpadding = clientHeight + 'px';
   console.log(newpadding);
   document.getElementById('main').style.paddingTop  = newpadding;
}
myFunction();
</script>

</body>

css

#left-area {
  -moz-column-count: 3;
  column-count: 3;
  -moz-column-gap: 60px;
  padding: 0px 10px;
}

.span-3-columns {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

.box{
    background-color:rebeccapurple;
    width: 100%;
    padding: 4px;
    margin: 0px 0px 10px;
}

.left-area-container {
  position: relative;
}

@media (min-width: 401px) and (max-width: 700px) {
    #left-area {
      -moz-column-count: 2;
      column-count: 2;
      -moz-column-gap: 30px;
    }

    .box{
        background-color:forestgreen;
    }
}

@media (max-width: 400px) {
    #left-area {
      -moz-column-count: 1;
      column-count: 1;
    }

    .box{
        background-color:cadetblue;
    }
}

Resize the window and watch it in action.

Collectives™ on Stack Overflow

How to span through css columns

4 Answers 4

3 Comments

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related