Reputation: 717

Columns with corresponding content

Let's say I have some structured content in HTML – for example text in paragraphs grouped into some sections. And let's say I have another instance of the same structure and I want to display both contents as two columns side by side using HTML and CSS. How to do that? The point is that I want that corresponding elements (paragraphs, sections) inside the columns are aligned so they start at the same height.

Examples of such structures may be a bilingual page, or a source code together with numbers of lines or with some side comments to individual lines.

The only idea I have is to use a table, but I'm not sure it is the best solution. I want to be able to select the content as if the column was an ordinary web page, but selecting in a table works in a way that cells in a row are selected first.

An example follows. Recall that I want the corresponding elements to start at the same height.

<!doctype html>
<html>
    <head>
        <title>Corresponding columns</title>
        <meta charset="utf-8">
        <style type="text/css">
            .main {
                margin: auto;
                width: 500px;
            }
            .column {
                float: left;
                width: 50%;
            }
            .corresponding {
                background-color: #FFFF99;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div class="column">
                <h1>Section</h1>
                <p>Some text</p>
                <h2 class="corresponding">Subsection</h2>
                <p>Some other text</p>
            </div>
            <div class="column">
                <h1>Section</h1>
                <p>The text translated to another language, which may be longer.</p>
                <h2 class="corresponding">Subsection</h2>
                <p>Some other text</p>
            </div>
        </div>
    </body>
</html>

Upvotes: 11

Answers (5)

William

Reputation: 749

Use css column-count CSS property: https://css-tricks.com/almanac/properties/c/columns/

Update

After re-reading the question, I think if you want both columns to start at the same height, you can use min-height on both columns, but be aware that the content will later push the height as it grows.

To maintain the height even with content, put a fixed height then have apply overflow-y:auto; or overflow-y:scroll. That way both boxes will have the same height, and can be scrollable in case content grows

Upvotes: 0

Asons

Reputation: 87201

If you want each section/subsection to start at the same height I would suggest to do like this:

<div class="main">
    <div class="row">
        <div class="column">
            <h1>Section</h1>
            <p>Some text</p>
        </div>
        <div class="column">
            <h1>Section</h1>
            <p>The text translated to another language, which may be longer.</p>
        </div>
    </div>
    <div class="row">
        <div class="column">
            <h2 class="corresponding">Subsection</h2>
            <p>Some other text</p>
        </div>
        <div class="column">
            <h2 class="corresponding">Subsection</h2>
            <p>This text might also be longer so you need to push the next section's as well to start at the same height</p>
        </div>
    </div>
</div>

Same (almost) as a table but with div's.

I'm no "flex-box" expert so that might be a way, though with less broad browser support.

If you can't/don't want to use the "row" elements (and no/can't/don't want flex option) you will need a javascript snippet that iterate through your elements and compute margins to be set.

UPDATE

Check these 2 links, they will help you set this up as you like using flex:
- https://chriswrightdesign.com/experiments/using-flexbox-today/#card-layout
- http://codepen.io/imohkay/pen/PwPwWd/

A future proof way without using javascript.

UPDATE 2

And this one has some really cool grid solutions:
- https://philipwalton.github.io/solved-by-flexbox/demos/grids/

Upvotes: 8

Adam Bartoš

Reputation: 717

Thank to LGSon, I have learnt about flex. I tried to put together a solution. The following code somehow works, but there are some issues:

One has to add `order` attribute to all elements.
For some reason flex doesn't overlap margins like it is done in standard situation so all the vertical spaces are bigger.
It would be know hard to e.g. add a border around whole column.

<!doctype html>
<html>
    <head>
        <title>Corresponding columns</title>
        <meta charset="utf-8">
        <style type="text/css">
            .container {
                margin: auto;
                width: 500px;
                display: flex;
                flex-wrap: wrap;
            }
            .container > * {
                flex: 0 0 50%;
            }
            .corresponding {
                background-color: #FFFF99;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1 style="order: 1">Section</h1>
            <p style="order: 2">Some text</p>
            <h2 style="order: 3" class="corresponding">Subsection</h2>
            <p style="order: 4">Some other text</p>

            <h1 style="order: 1">Section</h1>
            <p style="order: 2">The text translated to another language, which may be longer.</p>
            <h2 style="order: 3" class="corresponding">Subsection</h2>
            <p style="order: 4">Some other text</p>
        </div>
    </body>
</html>

Upvotes: 2

PzYon

Reputation: 2993

If I understand your question correctly, you are searching for an HTML-structure which shows two items next to each other. Each of the properties of this item (i.e. the subsections) should have the same height. And, when the user selects the text, then the whole row (i.e. the same property from both items) should be selected.

I have the feeling that in order for the user to be able to select content the way you want, the structure needs to be correct, as I believe that the browser selects content according to the structure (not sure, this is always true though).

The question is, if you are free to use any HTML-structure you like?

When I try below example, it works for me. The solution is to use a list (ul with li) per "property" (row), making the lis display as inline-block. That way, they don't break and, as they are block elements, they always have the same height per "line". With vertical-align: top; all content starts at the beginning of the element.

I adjusted the content so we definitely have different line heights and wrapping, just to be sure it works.

Styling:

<style>
    ul {
        list-style: none;   
    }

    ul li {
        display: inline-block;
        vertical-align: top;
        width: 20%;
    }
</style>

HTML:

<ul>
    <li>Section 1</li>
    <li>Section 2<br/>(with new line)</li>
</ul>
<ul>
    <li>Some text</li>
    <li>The text translated to another language, which may be longer.<br /><br />
    The text translated to another language, which may be longer. 
    The text translated to another language, which may be longer. 
    The text translated to another language, which may be longer. 
    The text translated to another language, which may be longer. 
    The text translated to another language, which may be longer. </li>
</ul>
<ul>
    <li>The text translated to another language, which may be longer. 
        The text translated to another language, which may be longer.</li>
    <li>Some text</li>
</ul>

Upvotes: 2

David Stančík

Reputation: 350

Well, I dont know what exactly You want... I thing that You might want two sections side-by-side, where You can place anything... Thats what I found:

make two div's <div id="first"> and <div id="second">

and place what You want in them. Now css:

#first {float:left;width:50%;}

#second {float:right;width:50%;}

Make sure You have body {padding:0; margin:0;}

Upvotes: 2

Columns with corresponding content

Answers (5)

Related Questions