CSS two columns without specific widths

Question

I am trying to port a simple two column table to use div and float. I need the feature of a table that is able to scale the width of all columns to the largest content (without taking the whole browser width), but would like the added feature of floats to be able to split the columns when the browser width is reduced.

enter image description here

I can achieve this using something like this:

div {
  max-width: 285px;
}

div div:first-child {
  float: left;
  border: 1px solid #ccc;
  margin: 1px;
  width: 145px;
}

div div:nth-of-type(2) {
  float: right;
  border: 1px solid #ccc;
  margin: 1px;
  width: 130px;
}

div div:last-child {
  clear: left;
}

<div>
  <div>The</div>
  <div>12</div>
  <div class="clear" />
  <div>The cat</div>
  <div>12 34</div>
  <div class="clear" />
  <div>The cat sat</div>
  <div>12 34 56</div>
  <div class="clear" />
  <div>The cat sat on</div>
  <div>12 34 56 78</div>
  <div class="clear" />
  <div>The cat sat on the</div>
  <div>12 34 56 78 9A</div>
  <div class="clear" />
  <div>The cat sat on the mat</div>
  <div>12 34 56 78 9A BC</div>
  <div class="clear" />
</div>

How is it possible to achieve the same result without needing to set width and max-width values for the divs? With a table this would be automatic, but would lose the split capability. I am hoping there is a CSS only solution.

The result should be two aligned columns which are able to split when necessary, as shown in the picture link.

I don't think what you want to achieve is possible only with css. Either you need to make your layout column based (which will prevent you from having split functionality) or row based (in this case you won't have equal div widths without hard-coding, they'll simply adjust to size of their content). You'd be able to achieve this with js/jquery though, by detecting width of widest div, and applying same to rest of them. How open you are to js solution? — robjez
– robjez, Commented Jun 9, 2015 at 9:06
js sounds good to me. I sort of guessed that might be the case but was hoping there might be some kind of CSS calc() solution now available. — Martin Evans
– Martin Evans, Commented Jun 9, 2015 at 9:17
I can't think of any way, calc() could help here, but I do not know every possible css hack. JS is most probably the way here. Are you using jQuery in your setup? — robjez
– robjez, Commented Jun 9, 2015 at 9:22
Try this fiddle jsfiddle.net/xz7y3aLf/7 and let me know if this suits you — robjez
– robjez, Commented Jun 9, 2015 at 9:34

Nazim Kerimbekov · Accepted Answer · 2019-05-14 12:49:36Z

Since I don't think it is possible with only CSS, I have a jQuery solution, so it goes:

var xyz = $('.row div:first-child'),
  abc = $('.row div:nth-child(2n)'),
  arr = [],
  arr2 = [];

xyz.each(function() {
  arr.push($(this).width());
});

var max = Math.max.apply(Math, arr);
xyz.css('width', max);

abc.each(function() {
  arr2.push($(this).width());
});

var max2 = Math.max.apply(Math, arr2);
abc.css('width', max2);

.row {
  width: 100%;
  overflow: hidden;
}

.row div {
  float: left;
  border: 1px solid #ccc;
  margin: 1px;
}

.row div:nth-child(2) {
  margin-left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="xyz">
  <div class="row">
    <div>The</div>
    <div>12</div>
  </div>
  <div class="row">
    <div>The cat</div>
    <div>12 34</div>
  </div>
  <div class="row">
    <div>The cat sat</div>
    <div>12 34 56</div>
  </div>
  <div class="row">
    <div>The cat sat on</div>
    <div>12 34 56 78</div>
  </div>
  <div class="row">
    <div>The cat sat on the</div>
    <div>12 34 56 78 9A</div>
  </div>
  <div class="row">
    <div>The cat sat on the mat</div>
    <div>12 34 56 78 9A BC</div>
  </div>
</div>

pavel · Accepted Answer · 2019-05-15 10:44:12Z

1

Add to the second one div margin-left and float: left.

div div:nth-of-type(2) {float:left; border: 1px solid #ccc; margin: 1px 1px 1px 80px; width: 130px;}
                              ^^^^                                              ^^^^

https://jsfiddle.net/shhdq5kg/

edited May 15, 2019 at 10:44

answered Jun 9, 2015 at 8:08

pavel

27.3k11 gold badges47 silver badges63 bronze badges

1 Comment

Martin Evans Over a year ago

Thank you, my aim is to have a simple two column aligned table style layout which is able to split at the column break when the browser width is reduced. This will help with mobile device layout. As the data being displayed changes, I am not able to hard code the widths.

Collectives™ on Stack Overflow

CSS two columns without specific widths

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related