-1

This is the desired layout - as if each element were part of a table cell

Can this be done with CSS and divs or do I have to use flex box or resort to an html table?

I'm hoping to find a solution that utilizes the display:table, display:table-row, display:table-cell properties of CSS.

Update: Each column has 5 elements. The crux of my question is whether its possible to use CSS's table layout algorithms to auto align the 5 elements across all 3 columns so that they are on the same horizontal alignment regardless of the amount of content in any given cell - each column auto adjusts on the fly so that it maintains table-row integrity. This is exactly like a table would behave if each of these elements were in a table-row as table-cells.

Scott B
  • 38,833
  • 65
  • 160
  • 266
  • 1
    Yes, it can be done without a table and with the display properties you listed (and without flex), but it would help us if you posted what you're working with and what you've tried. As it stands now this question is too open-ended. – j08691 Mar 11 '15 at 21:16
  • possible duplicate of [Sibling divs match height in container](http://stackoverflow.com/q/12716525/2065237) – Sildoreth Mar 11 '15 at 21:41

2 Answers2

2

In case anyone else needs this, here's my extension of your answer to completely mimic the look of the example screenshot.

HMTL:

<div class="table-container">
    <div class="table-cell">
        Row 1 cell 1
    </div>
    <div class="table-cell">
        Row 1 cell 2
    </div>
    <div class="table-cell">
        Row 1 cell 3 <p>with a paragraph to make things interesting</p>
    </div>
</div>

<div class="table-container">
    <div class="table-cell">
        Row 2 cell 1
    </div>
    <div class="table-cell">
        Row 2 cell 2
    </div>
    <div class="table-cell">
        Row 2 cell 3<br/>
        w/extra stuff in here
    </div>
</div>

<div class="table-container">
    <div class="table-cell">
        Row 3 cell 1
    </div>
    <div class="table-cell">
        Row 3 cell 2
    </div>
    <div class="table-cell">
        Row 3 cell 3 <p>with a paragraph to make things interesting</p>
    </div>
</div>

CSS:

.table-container {
    border-spacing: 5px;
    display: table;
    margin-top:-10px;
    }
.table-cell {
    border: solid #ddd 2px;
    display: table-cell;
    padding:10px;
    border-width:0 2px;
    width:200px
}
.table-container:first-child .table-cell{border-top:2px solid #ddd;}
.table-container:last-child .table-cell{border-bottom:2px solid #ddd;top:-10px!important;}
Scott B
  • 38,833
  • 65
  • 160
  • 266
1

I think you've answered your own question. Using the display:table* properties you can make divs behave like tables:

<div class="container">
    <div class="item">
        Enrollment
    </div>
    <div class="item">
        Enrollment
    </div>
    <div class="item">
        Enrollment<br/>
        w/extra stuff in here
    </div>
</div>

.container {
    border-spacing: 5px;
    display: table;
}
.item {
    border: solid #ddd 2px;
    display: table-cell;
}

http://jsfiddle.net/ukLyrqo7/

You may need to leave some space in the bottom of your "cells" to absolutely position the estimate text and button.

Kevin Boucher
  • 16,426
  • 3
  • 48
  • 55
  • Thanks Kevin, but your comment about absolute positioning is the kicker. We would not have to do that with table cell layouts, so I'm not certain you're answer fully addresses the problem. Vertically positioning the estimate text and button is at the heart of my question. – Scott B Mar 11 '15 at 21:46
  • Your right. It does work, but doesn't rely solely on table layout algorithm but rather we have to reserve space for the button to be out of flow AP. This is very close as an alternate method though. – Scott B Mar 11 '15 at 22:09
  • 1
    +1 Accepted. I found that I can just add multiple container divs in order to mimic table-row to keep adjacent cells in sync with same vertical positioning. This makes it so that you do not have to use AP and break flow. – Scott B Mar 12 '15 at 20:24