CSS Column Span across multiple columns

Question

I am using display:table and display:table-cell to build my columns.

Is it possible to have a column inside another column span across 2 columns?

I tried column-span: all but that does not seem to work?

.column-container {
  display: table;
  border-collapse: collapse;
  margin-bottom: 10px;
}
.column-container .col-5-with-rule {
  display: table-cell;
  vertical-align: top;
  width: 150px;
  border-left: none;
  padding-left: 0;
  padding-right: 9px;
}
.column-container .col-5-with-rule ~ .col-5-with-rule {
  border-left: 1px solid #d1d1d1;
  padding-left: 9px;
  padding-right: 9px;
}

.column-container .col-span-2 {
  column-span: all;
}

<div class="column-container"><!-- columns container -->
  <div class="col-5-with-rule"><!-- column -->
    <p>Table cell</p>
      <div class="col-span-2"><!-- column span -->
        <p>Make me span into 2 columns.</p>
      </div><!-- #column span -->
  </div><!-- #column -->
  <div class="col-5-with-rule"><!-- column -->
    <p>Table cell</p>
  </div><!-- #column -->
</div><!-- #columns container -->

Lloyd Banks · Accepted Answer · 2013-11-07 23:21:17Z

1

Depending on the context you'd like to use this in, you can build your grid out with Bootstrap.

Here's the HTML mark-up to achieve what you want using Bootstrap 3

<div class = "row">
    <div class = "col-xs-2">
        Table cell
    </div>
    <div class = "col-xs-2">
        Table cell
    </div>
</div>
<div class = "row">
    <div class = "col-xs-4">
        Make me span into 2 columns.        
    </div>
</div>

Fiddle here

Mark-up for Bootstrap 2

<div class = "row">
    <div class = "span2">
        Table cell
    </div>
    <div class = "span2">
        Table cell
    </div>
</div>
<div class = "row">
    <div class = "span4">
        Make me span into 2 columns.        
    </div>
</div>

Fiddle

edited Nov 7, 2013 at 23:21

answered Nov 7, 2013 at 22:49

Lloyd Banks

37k58 gold badges172 silver badges264 bronze badges

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

1 Comment

simple Over a year ago

is there a way to do the same in bootstrap 2?

Adjit · Accepted Answer · 2013-11-07 22:42:24Z

0

You can set col-span-2s position to absolute and then position it wherever you want to.

Fiddle: http://jsfiddle.net/sSK8u/2/

answered Nov 7, 2013 at 22:42

Adjit

10.3k13 gold badges58 silver badges102 bronze badges

Collectives™ on Stack Overflow

CSS Column Span across multiple columns

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related