Best way to display 2 columns of 2 columns

HTML & CSS
22

The OP is very happy with Paul’s solution, thanks Sam. But now you’ve started I shall need to see version this working! :wink:

It’s not the table width that’s causing it not to be in 2 columns is it?

23

Looks like it’s in 2 columns to me?

What do you see not working?

Yes the table version should be good :slight_smile:

24

Just checked in Firefox and the table version seems not to be working there. Its working fine in Chrome and IE.

It seems that Firefox won’t split tables and must have been in the back of my mind when I did my original as a list :slight_smile:

25

Yes, I’m using Firefox.

26

I don’t believe there is a fix for this as Firefox just won’t split the table. Indeed from looking on the web people are using display:table as a hack to stop non table content from being split when as Firefox doesn’t obey the page-break-inside rules.

27

I have uploaded all three versions because it is far easier to see the final results and the source code:

3 Online Demos

4 Likes
28

I’m looking at it in Chrome now and it works perfectly. Would be a good solution if Firefox did not let us down.

29

Pity Firefox has problems with the two columns table. The data is probably best presented in a table, though I think it depends on context.

The name-year pairs could also be properly presented in a definition list. Still there would be problems in Firefox due to the double block items that need to be treated as one for the columns to work reliably. The “run-in” display would be perfect if Firefox supported it. But by faking the the run-in display, backwards sort of, the items pair will act as one.

I see so far only the table solution can have fluid width and let too narrow items wrap their contents.

This definition list should work also in a fluid box. E.g.:

<!DOCTYPE HTML><html lang="en"><head><meta charset="utf-8">
<title>Untitled</title>
<style>
.names {
    margin:50px;
    padding:0;
    list-style:none;
    -webkit-column-count: 2;
    -webkit-column-gap: 50px;
    -webkit-column-rule: 1px solid #ccc;
    -moz-column-count: 2;
    -moz-column-gap: 50px;
    -moz-column-rule: 1px solid #ccc;
    column-count: 2;
    column-gap: 50px;
    column-rule: 1px solid #ccc;
    line-height:1.2em;
    text-align:right;
}
.names dt{
    margin-bottom:-1.6em;
    padding:.3em 0 .2em;
    border-bottom:1px solid #ccc;
    text-align:left;
}
.names dt:after{
    display:inline-block;
    width:5em; /* wrap buffer */
    content:"\a0";
}
.names dd{
    display:inline-block;
    margin:0;
    padding:.2em 0;
    width:5em;
    text-align:left;
}
</style>
</head><body>

<dl class="names">
    <dt>1 - Adam with longer text</dt> <dd>1935-40</dd>
    <dt>2 - Adam 2 </dt> <dd>1935-40</dd>
    <dt>3 - Adam 3</dt> <dd>1935</dd>
    <dt>4 - Bert</dt> <dd>1935-40</dd>
    <dt>5 - Bert 2</dt> <dd>1935-40</dd>
    <dt>6 - Bert 3</dt> <dd>1935-40</dd>
    <dt>7 - Chris</dt> <dd>1935</dd>
    <dt>8 - Chris 2</dt> <dd>1935-40</dd>
    <dt>9 - Chris 3</dt> <dd>1935-40</dd>
    <dt>10 - Edward</dt> <dd>1935-40</dd>
    <dt>11 - Freddie</dt> <dd>1935</dd>
    <dt>12 - George</dt> <dd>1935-40</dd>
    <dt>13 - Harold</dt> <dd>1935-40</dd>
    <dt>14 - Ian</dt> <dd>1935-40</dd>
    <dt>15 - Jim</dt> <dd>1935</dd>
    <dt>16 - Kevin</dt> <dd>1935-40</dd>
    <dt>17 - Lee</dt> <dd>1935-40</dd>
    <dt>18 - Malcolm</dt> <dd>1935-40</dd>
    <dt>19 - Nigel</dt> <dd>1935</dd>
    <dt>20 - Oswald</dt> <dd>1935-40</dd>
    <dt>21 - Paul</dt> <dd>1935-40</dd>
    <dt>22 - Quentin</dt> <dd>1935-40</dd>
    <dt>23 - Robert</dt> <dd>1935</dd>
    <dt>24 - Steve</dt> <dd>1935-40</dd>
    <dt>25 - Unwin</dt> <dd>1935-40</dd>
    <dt>26 - Vince</dt> <dd>1935-40</dd>
    <dt>27 - William</dt> <dd>1935</dd>
    <dt>28 - Xavier</dt> <dd>1935-40</dd>
    <dt>29 - Young</dt> <dd>1935-40</dd>
    <dt>30 - Zygo</dt> <dd>1935-49</dd>
</dl>

</body></html>

The item border is added for readability when items wrap content.

2 Likes
30

I have added your version:

4 - Onlne Demos

I still prefer my responsive version rather than having the data squeezed, also far less code for the sake of a float :slight_smile:

I am curious to know if there are any browser problems.

31

Sorry for fluffing, but I’ve gotta give @Erik_J’s code . Splendid out-of-the box thinking. With the addition of a one-item media query, it becomes a single column list. Ya just can’t beat that. I nominate Erik for the annual @dresden_phoenix “Situational Thinker” award! :clap: :clap: :clap: :standing ovation:

2 Likes
32

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.