Inline
column elements with pure CSS

Question

I have a table-like structure where the columns represent the logical entities. For my use case, it's the table rows that need to be visually grouped, preferably by flowing them inline.

Example source fragment:

<div>
  <div id="entity1" class="entities">
    <div>Ab</div>
    <div>Cdefg</div>
  </div>
  <div id="entity2" class="entities">
    <div>98224</div>
    <div>511</div>
  </div>
  <div id="entity3" class="entities">
    <div>αβγδ</div>
    <div>ε</div>
  </div>
</div>

Desired layout:

+----+-------+------+
| Ab | 98224 | αβγδ |
+----+--+----++---+-+
| Cdefg | 511 | ε |
+-------+-----+---+

Of course, it is easy to transform the document on the server-side purely for the presentation, but I wonder if I can keep the document hierarchy as it is and do the transformation on the (CSS) presentation layer. Is it at all possible?

adding php to the script will work better, that's my opnion. you can use looping there with in loop you will be able to apply CSS rules..that's an idea man.. — Zaffar Saffee, Feb 25 '12 at 21:03
Well, you can already get quite close with this CSS fragment: `.entities { display: inline-block; }`. The question is if it's actually possible to make the "rows" flow inline as shown in the example. — glts, Feb 25 '12 at 21:23
No clue why this would have 2 downvotes. It seems pretty clear to me, and if the downvotes came previously, the question didn't seem that bad when it was first asked either. — BoltClock, Oct 20 '13 at 10:32
The OP's issue is quite considerable as an effective design issue. Deserve my upvote. — Rajesh Paul, Oct 20 '13 at 10:55
Assuming you wanted a super quick fix..you *could* duplicate your markup (not recommended though) like [this](http://jsfiddle.net/danield770/jWRTD/) (I had to change ids as well) — Danield, Oct 20 '13 at 11:26
@glts i can understand how it feels to get two +1s and two -1s... I respect your curiosity though.. +1 to your question.. meanwhile check my answer — Anshu Dwibhashi, Oct 20 '13 at 11:31
@Danield: That seems to be the basis for how CSS regions work, based on my less-than-familiar understanding of the module (except of course it doesn't involve duplicating of content). — BoltClock, Oct 20 '13 at 12:17
Not possible with CSS only. But if you don't want to touch the source code, you could consider transforming via JS, to do something like @Danield did. — andi, Oct 22 '13 at 20:45
Is your content always going to be one-line single word text in the `.entities div` elements? — Marc Audet, Oct 24 '13 at 14:33
@MarcAudet Not sure if I understand. The structure is completely regular. Every `div.entities` contains exactly the same number of child divs. But the leaves don't necessarily contain just a single word, `
ε
` could also be `
εζ ηθι
`. — glts, Oct 24 '13 at 15:06
have you tried `display:table` with the parents and the table-row with children? if you have and it didn't work, then I will start working on other solutions, just just wanted clarification. — Samia Ruponti, Oct 24 '13 at 18:29

BoltClock · Accepted Answer · 2013-10-20T12:46:18.193

As mentioned in your comment and in the other answers, it's trivial to lay entire .entities elements as inline blocks or to float them in order to line up their contents in rows, resembling a proper table. (Ironically, you can't replicate this layout using CSS2.1 table properties.)

However, if you need to lay each content element inline such that each row does not act like a table row rather than simply a line of boxes, as shown in your diagram, it's not possible with your given structure due to the way inline formatting works in CSS. Restructuring your content to accommodate such a layout is as simple as arranging the content by row and not by column, which I'm sure you have covered so I won't get into that.

From the spec:

Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the 'display' property make an element inline-level: 'inline', 'inline-table', and 'inline-block'. Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.

An inline formatting context can typically only be generated by a block container box:

A block container box either contains only block-level boxes or establishes an inline formatting context and thus contains only inline-level boxes.

In your structure, the only possible block container boxes are generated by each div. So the first .entities contains its own two children, and likewise for the second and third for their own children. You cannot transfer child elements across different containing blocks that are siblings, therefore you cannot distribute children of different elements across the same line, even if you force all of them to display: inline or if you force the content elements to display: inline-block.

Note that the top-level div element creates an inline formatting context as well but it cannot be used by your inner elements in this manner for the same reason.

Also, to address this part of your bounty statement:

CSS does have quite a few devices that alter the flow and alignment of boxes.

Unfortunately, this isn't possible even with flexbox, as flex containers work similarly to block containers and are therefore subject to the same limitations described above with respect to inline-level descendants.

This may be doable to a certain extent with CSS regions, but I'm not familiar with that module, and there's too little support for it to be relevant at this time anyway (even compared to flexbox).

I didn't know about css regions. Thanks. – Danield Oct 20 '13 at 12:24 — Danield, Oct 20 '13 at 12:24

Anshu Dwibhashi · Answer 2 · 2013-10-20T11:23:45.833

3

How about this:

.entities{
display:inline-block;
}

but this gives the following format:

+-------+-------+------+
| Ab    | 98224 | αβγδ |
+-------+-------+------+
| Cdefg | 511   | ε    |   
+-------+-------+---+--+

if you want the format you desire, then you might want to change your HTML code up a bit:

    <div>
  <div id="entity1" class="entities">
    <span class="cell">Ab</span>        
    <span class="cell">98224</span>
    <span class="cell">αβγδ</span>
  </div>
  <div id="entity2" class="entities">
    <span class="cell">Cdefg</span>
    <span class="cell">511</span>
    <span class="cell">ε</span>
  </div>
  <div id="entity3" class="entities"> 
  </div>
</div>

CSS:

.cell{
display:inline-block;
}

this gives the following layout:

+----+-------+------+
| Ab | 98224 | αβγδ |
+----+--+----++---+-+
| Cdefg | 511 | ε |
+-------+-----+---+

well, if you want to use the exact same HTML as you provided then, the answer is no...

the exact one you wanted, hope it helped!

edited Oct 20 '13 at 11:23

answered Oct 20 '13 at 10:56

Anshu Dwibhashi

4,617
3
28
59

Please do not post as "answer" something already posted by another person as a comment. Sometimes this is unavoidable such as when you begin your post before the comment was posted or without having a reasonable amount of time to see that comment -- but in this case, I'm sure you'll agree that the 20 month time gap gave you plenty of time, no? – mah Oct 20 '13 at 11:17
This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. – mah Oct 20 '13 at 11:18
@mah here's my research: http://stackoverflow.com/questions/450903/make-css-div-width-equal-to-contents http://stackoverflow.com/questions/2703601/how-to-give-line-break-from-css-without-using-br/2703615#2703615 – Anshu Dwibhashi Oct 20 '13 at 11:19
Anshuman read the comments under the question -- the one from @glts : `Well, you can already get quite close with this CSS fragment: .entities { display: inline-block; }. The question is if it's actually possible to make the "rows" flow inline as shown in the example.`. Now that you've extended your answer it's certainly improved -- much beyond what you originally posted; thank you! – mah Oct 20 '13 at 11:21

score 2 · Answer 3 · answered Feb 25 '12 at 21:22

<div>s are boxes, so I'm not sure that you'll be able to get the alignment you're looking for without styling each cell <div> individually. The closest I can approximate what you want is by attaching class="heading" to the entity <div>s:

HTML:

  <div id="entity1" class="heading">
    <div>Ab</div>
    <div>Cdefg</div>
  </div>

CSS:

div.heading {float: left;}
div.heading div {display: block; padding-right: 15px;}

but this just makes a table out of <div> elements.

If you are creating a table-like structure, why not use a <table>? Unless the misaligned column borders are essential, of course.

score 1 · Answer 4 · edited Jan 02 '14 at 14:46

1

Mayby :nth-child() with clear:left can help you

.container div:nth-child(4n){clear:left;}

JSFiddle link

edited Jan 02 '14 at 14:46

atiquratik

1,296
3
27
34

answered Oct 23 '13 at 12:00

Anon

2,854
14
18

score 1 · Answer 5 · answered Feb 25 '12 at 21:08

Give 'cells' class names, along with the 'rows'

<div>
  <div class="row" id="entity1">
    <div class="cell1">Ab</div>
    <div class="cell2">Cdefg</div>
  </div>
</div>

CSS:

.row {position:relative;}
.cell1 {width:33%;}
.cell2 {width:66%;}

This should work, so long as you have a general idea of the width needed for each column.

score 0 · Answer 6 · edited May 23 '17 at 12:28

Sorry if I'm not answering the css-question directly, but I wanna widen the perspective on the use of html-structure. (can't post comments)

I'm slightly puzzled by what you are trying to present with that kind of data and that html structure, especially if you have bigger datasets. Because PHP+/SQL would do you so much good in this case, as stated in a comment above.

I'm quessing that you are trying to represent relations between the entities, 1 relation on each row. But I'd say you've structured your html in a rather peculiar way for that purpose.

I've done some research regarding issues on the stucture that your html-code have, and I made a fiddle to show you what I mean: "Relation-rows by entity-columns"

The html structure I propose is the one Anshuman suggested above. I've recreated the structure he mentioned but done it so in a more pragmatic fashion. I've also evaluated the potential problems but also why this structure would suit the purpose better. (Atleast the purpose that I've percepted from your dataset.) Take a look at it here: "Relation-rows by entity-rows"

score 0 · Answer 7 · answered Oct 25 '13 at 10:57

0

Hi please flow blew code, I thing solve your problem

.entities{
display: inline;
float: left;
position: relative;
clear: right;

}

answered Oct 25 '13 at 10:57

Bipin Kumar Pal

1,009
2
8
16

Inline column elements with pure CSS

7 Answers7

Inline
column elements with pure CSS