CSS Table Elements With Double Size Border In Middle

Question

I am trying to create a CSS Table based layout which has an even spacing/border around each table cell and making sure that the table-cells are always the same height. Here is an example of what I am trying to achieve:

My HTML currently looks like this:

.two-col.body-width {
  max-width: 1138px;
}
.two-col {
  display: table;
  clear: both;
  margin: 0 auto;
  padding: 20px 0;
  width: 100%;
  box-sizing: border-box;
  border-spacing: 25px 0px;
}
.two-col > .col_container.align-top {
  vertical-align: top;
}
.layout .section-tout {
  position: relative;
  padding: 20px 40px 48px;
  background: #f4f4f3;
  border-left: 5px solid #da202a;
}
.two-col > .col_container {
  width: 50%;
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  box-sizing: border-box;
}

<section class="layout two-col body-width">
  <div class="col_container align-top section-tout">
    <!-- content goes here -->
  </div>
  <div class="col_container align-top section-tout">
    <!-- content goes here -->
  </div>
</section>

Here is a working example: https://jsfiddle.net/grzkgdp3/1/

What I have here is almost perfect, but as you can see from the image I updated I need the spacing / border to be doubled in the middle and I cannot see an intelligent way of doing this.

I can see a solution where I used border: 25px solid white; on the tabel-cell. This solves my spacing issue but because I need the red border on the left, I then have to apply this using the :after pseudo element which makes things a bit messy.

If anyone has a solid solution that can help it would be great to hear it.

Cheers!

Update

Unfortunately I cannot use a flexbox solution as I need to support all modern browser and IE9 and above.

How about placing a `.col_container.align-top` element with `width: 0px`? — Mr_Green, Sep 22 '16 at 10:05
Hey @Mr_Green I have just tried this and it completely messes up the layout. https://jsfiddle.net/grzkgdp3/2/ — lukehillonline, Sep 22 '16 at 10:07
Is there a reason you don't want to use flexbox? Do you need this layout to have more rows and vertically aligned columns? — JoannaFalkowska, Sep 22 '16 at 10:11
@lukehillonline I meant this.. https://jsfiddle.net/grzkgdp3/4/ btw, why don't you just nest those elements in to table-cells? — Mr_Green, Sep 22 '16 at 10:12
@Mr_Green Having an element squeezed in there like that is not a nice solution in my opinion. Also it would mess up the logic of my grid. — lukehillonline, Sep 22 '16 at 10:29
@Senthe I hadn't really thought about flexbox yet, what is the browser support of this? I need to support back to IE9 — lukehillonline, Sep 22 '16 at 10:29
@lukehillonline http://caniuse.com/#feat=flexbox I pity you if you really need to support so outdated abominations. — JoannaFalkowska, Sep 22 '16 at 12:22
@Senthe it is not always that black and white, clients have requirements and usage stats that require older browsers. But thanks for the very unnecessary comment / pity, very constructive. — lukehillonline, Oct 17 '16 at 15:00

score 1 · Answer 1 · answered Sep 22 '16 at 10:12

Have you considered Flexbox

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background: white;
}
.two-col.body-width {
  max-width: 1138px;
  padding: 25px;
}
.two-col {
  display: flex;
  margin: 0 auto;
  box-sizing: border-box;
}
.layout .section-tout {
  position: relative;
  background: pink;
  padding: 20px;
  border-left: 5px solid #da202a;
  flex: 0 1 50%;
  display: flex;
}
.two-col > div:first-child {
  margin-right: 50px;
}

<section class="layout two-col body-width">
  <div class="col_container align-top section-tout">
    <p>
      See how there is different amounts of content, but the cells are always the same height, this is very important!
    </p>
  </div>
  <div class="col_container align-top section-tout">
    <p>
      Hi!
    </p>
  </div>
</section>

Looks good, what is the browser support for this, I need to support back to IE9 — lukehillonline, Sep 22 '16 at 10:33
Dam, +1 for a good solution but unfortunately I cannot budge on IE9 — lukehillonline, Sep 22 '16 at 10:34

Mr_Green · Accepted Answer · 2016-09-22T11:51:00.010

Sometimes we must bend to support compatibility. I used linear-gradients to achieve the result.

body {
  background: white;
}

.two-col.body-width {
  max-width: 1138px;
}

.two-col {
  display: table;
  clear: both;
  margin: 0 auto;
  padding: 20px 0;
  width: 100%;
  box-sizing: border-box;
}

.two-col > .col_container.align-top {
  vertical-align: top;
}

.layout .section-tout p {
  position: relative;
  padding: 20px 40px 48px;
  margin: 0;
}

.two-col > .col_container {
  width: 50%;
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  box-sizing: border-box;
  padding: 0px 25px;
  background-image: linear-gradient(to right, transparent 25px, #da202a 25px, #da202a 30px, #f4f4f3 30px, #f4f4f3 calc(100% - 25px), transparent 0);
  background-image: -ms-linear-gradient(to right, transparent 25px, #da202a 25px, #da202a 30px, #f4f4f3 30px, #f4f4f3 -ms-calc(100% - 25px), transparent 0);
}

<section class="layout two-col body-width">
  <div class="col_container align-top section-tout">
    <p>
      See how there is different amounts of content, but the cells are always the same height, this is very important!
    </p>
  </div>
  <div class="col_container align-top section-tout">
    <p>
      Hi!
    </p>
  </div>
</section>

Working Fiddle

Working fiddle (without calc)

This is an interesting solution, I don't think linear-gradient is supported in IE9. Do we need to put in an `-ms-filter` for this? — lukehillonline, Sep 22 '16 at 11:01
@lukehillonline try with `-ms` vendor prefix.. `-ms-linear-gradient`. — Mr_Green, Sep 22 '16 at 11:37

CSS Table Elements With Double Size Border In Middle

2 Answers2