CODEWITHSUNDEEP
css
osakagreg
osakagreg

Reputation: 577

How to span through css columns

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

Upvotes: 2

Views: 688

Answers (4)

osakagreg
osakagreg

Reputation: 577

@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.

Upvotes: 0

nashcheez
nashcheez

Reputation: 5183

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/

Upvotes: 0

Vince
Vince

Reputation: 4232

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>

Upvotes: 1

Bla...
Bla...

Reputation: 7288

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.

Upvotes: 2

Related Questions