How would I go about making three bodies of text side-by-side?

Question

My HTML is as follows:

<!DOCYTPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Side-by-Side</title>
    </head>
    <body>
        <div class="passage">
            <div class="section">
                <p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p>
            </div>
            <div class="section">
                <p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.</p>
            </div>
        </div>
        <div class="passage">
            <div class="section">
                <p>Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.</p>
            </div>
            <div class="section">
                <p>Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that shit? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that shit.</p>
            </div>
        </div>
        <div class="passage">
            <div class="section">
                <p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.</p>
            </div>
            <div class="section">
                <p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p>
            </div>
        </div>
    </body>
</html>

I would like for my content to appear as follows:

+--------------------------+--------------------------+--------------------------+
| The path of the          | Normally, both your      | Now that we know who you |
| righteous man is beset   | asses would be dead as   | are, I know who I am.    |
| on all sides by the      | fucking fried chicken,   | I'm not a mistake! It    |
| iniquities of the        | but you happen to pull   | all makes sense! In a    |
| selfish and the tyranny  | this shit while I'm in a | comic, you know how you  |
| of evil men. Blessed is  | transitional period so I | can tell who the         |
| charity and good will,   | don't wanna kill you, I  | arch-villain's going to  |
| shepherds the weak       | wanna help you. But I    | be? He's the exact       |
| through the valley of    | can't give you this      | opposite of the hero.    |
| darkness, for he is      | case, it don't belong to | And most times they're   |
| truly his brother's      | me. Besides, I've        | friends, like you and    |
| keeper and the finder of | already been through too | me! I should've known    |
| lost children. And I     | much shit this morning   | way back when... You     |
| will strike down upon    | over this case to hand   | know why, David? Because |
| thee with great          | it over to your dumb     | of the kids. They called |
| vengeance and furious    | ass.                     | me Mr Glass.             |
| anger those who would    |                          |                          |
| attempt to poison and    |                          |                          |
| destroy My brothers. And |                          |                          |
| you will know My name is |                          |                          |
| the Lord when I lay My   |                          |                          |
| vengeance upon thee.     |                          |                          |
+--------------------------+--------------------------+--------------------------+
| Well, the way they make  | Now that there is the    | You think water moves    |
| shows is, they make one  | Tec-9, a crappy spray    | ice. It moves like it    |
| show. That show's called | gun from South Miami.    | has a mind. Like it      |
| a pilot. Then they show  | This gun is advertised   | knows it killed the      |
| that show to the people  | as the most popular gun  | world once and got a     |
| who make shows, and on   | in American crime. Do    | taste for murder. After  |
| the strength of that one | you believe that shit?   | the avalanche, it took   |
| show they decide if      | It actually says that    | us a week to climb out.  |
| they're going to make    | in the little book that  | Now, I don't know        |
| more shows. Some pilots  | comes with it: the most  | exactly when we turned   |
| get picked and become    | popular gun in American  | on each other, but I     |
| television programs.     | crime. Like they're      | know that seven of us    |
| Some don't, become       | actually proud of that   | survived the slide...    |
| nothing. She starred in  | shit.                    | and only five made it    |
| one of the ones that     |                          | out. Now we took an      |
| became nothing.          |                          | oath, that I'm breaking  |
|                          |                          | now. We said we'd say it |
|                          |                          | was the snow that killed |
|                          |                          | the other two, but it    |
|                          |                          | wasn't. Nature is lethal |
|                          |                          | but it doesn't hold a    |
|                          |                          | candle to man.           |
+--------------------------+--------------------------+--------------------------+

Without CSS, I would like for each entire column to be a body of text, rendering three bodies of text.

I understand that I can manually set the height of each section, but is there a way for CSS to do this automatically, setting each section's height to the height of the maximum initial height of the sections in its corresponding row? If not, what is the best workaround without using JavaScript?

I think you could make this work by setting each passage to `float: left` `width: 33.333333%` then inside each passage make the sections `width: 100%` `float: left` — mcclaskiem, Sep 21 '15 at 20:01
The sections won't be vertically aligned into rows with that. — Tyler Crompton, Sep 21 '15 at 20:04
The "proper" way to accomplish this will be with [CSS Regions](http://caniuse.com/#feat=css-regions), which isn't supported in nearly anything. — Scott, Sep 21 '15 at 20:07
@TylerCrompton Check out my answer posted below, is that what you want? — divy3993, Sep 21 '15 at 20:12
This article may offer some insight, seems pretty similar. http://stackoverflow.com/questions/2114757/css-equal-height-columns — mcclaskiem, Sep 21 '15 at 20:38
@TylerCrompton, was not able to help using CSS, but tried using JavaScript/JQuery which is totally dynamic and useless for you :). I know it would not help you but still was a good question. Tried it [here](http://jsfiddle.net/qm4mavo2/3/). — divy3993, Sep 22 '15 at 06:04

score 2 · Accepted Answer · answered Sep 21 '15 at 20:56

2

I can't think of a CSS-only responsive solution in which cousin elements in a row can have the height as their largest cousin.

However, if you can remove the passage elements and leave only the sections, here's a flexbox solution:

CSS

.container {
  display: flex;
  flex-wrap: wrap;
}

.section {
  width: 33.33%;
  box-sizing: border-box;
  padding: 0 0.5em;
  border: 1px solid silver;
}

.section:nth-of-type(1) {order: 0;}
.section:nth-of-type(2) {order: 3;}
.section:nth-of-type(3) {order: 1;}
.section:nth-of-type(4) {order: 4;}
.section:nth-of-type(5) {order: 2;}
.section:nth-of-type(6) {order: 5;}

HTML

<div class="container">
  <div class="section">...</div>
  <div class="section">...</div>
  <div class="section">...</div>
  <div class="section">...</div>
  <div class="section">...</div>
  <div class="section">...</div>
</div>

Fiddle

(Great movie, BTW.)

answered Sep 21 '15 at 20:56

Rick Hitchcock

35,202
5
48
79

Thanks. I just pulled text from http://slipsum.com/. Not sure if all of the quotes are from Pulp Fiction or not though. Too lazy to check. – Tyler Crompton Sep 22 '15 at 23:26
My use case is that I need to chose changes to a body of text. A client needs to be able to see the changes side-by-side. The first column is the original text, the second column is the new text, and the third column are comments regarding the change(s). The client needs to be able to print them out in the side-by-side format or the "passage-by-passage" format. Unfortunately, the changes are so diverse that there are cases in which multiple sections in one passage might match up with just one passage in another passage. Is there a way to stack multiple sections using this technique? – Tyler Crompton Sep 23 '15 at 01:45
Grouping by passage makes sense for your use case, but you'd then need JavaScript to make cousin sections the same height (which isn't too difficult). If you Fiddle (CodePen ...) an example where my solution doesn't work, I'll have a look. – Rick Hitchcock Sep 23 '15 at 09:18

score 0 · Answer 2 · answered Sep 21 '15 at 20:06

0

You could try this for your CSS using the HTML you provided: -

CSS

.container {
    display: flex;
    flex-grow: 1;
    align-items: flex-start
}

.passage {
    margin: 1%;
}

.section {
    border: 1px solid black;
    height: 400px;
    width: 200px;
    padding: 0% 2%;
}

p {
   text-align: justify;
}

Here's a live demo - DEMO

You can remove the width property on section to have a more fluid layout but if you prefer fixed widths, then stick with a pixel value.

answered Sep 21 '15 at 20:06

aphextwix

1,838
3
21
27

Is there a way to have the sections aligned without explicitly setting a height? – Tyler Crompton Sep 21 '15 at 20:23
@TylerCrompton - you want all of the elements to be the same height without setting a height? – aphextwix Sep 21 '15 at 20:25

score 0 · Answer 3 · answered Sep 21 '15 at 20:06

0

Here is a code pen that gets you pretty close to what your trying to do. You will have to experiment with the padding on the sections to get them how you want

http://codepen.io/mcclaskiem/pen/qONxLN

* {
    box-sizing: border-box;
}

.passage {
  width: 33.333333%;
  float: left;
  padding: 0 1%;
}

.section {
  width: 100%;
  float: left;
}

answered Sep 21 '15 at 20:06

mcclaskiem

394
1
15

It doesn't look like the sections are vertically aligned with one another. – Tyler Crompton Sep 21 '15 at 20:22
Are you trying to have every section set to the same height? – mcclaskiem Sep 21 '15 at 20:26
Every section in its corresponding row for each row, yes. – Tyler Crompton Sep 21 '15 at 21:34

How would I go about making three bodies of text side-by-side?

3 Answers3