How to make a list with each row divided into two columns, with the first column growing to the size of its...
2
Originally I needed this for a chat app. Now I need it for something else as well... I figure I'd better ask.
Elaborating the chat app example: chat messages are lis, they have two spans: one for the author's nick, the other one for the message, I'd like the size of all spans to be equal (for aesthetic purposes) and grow to fit the longest nick.
Failed attempts:
1. Flexbox
span {
margin-top: 10px;
}
.author {
font-weight: bold;
margin-right: 5px;
}
.author:after {
content: ":";
}
.message {
flex: auto;
}
li {
display: flex;
}<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span></li>
<li><span class="author">SomeOtherLongerNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>As you can see the width of the nick field is not equal among messages which, IMO, is ugly.
2. Fixed width
span {
position: relative;
display: inline-block;
margin-top: 10px;
}
.author {
font-weight: bold;
margin-right: 5px;
width: 30%;
text-align: right;
vertical-align: top;
}
.author:after {
content: ":";
}
.message {
width: 65%;
}
ul {
list-style-type: none;
padding-left: 0;
}<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span></li>
<li><span class="author">nick2</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>As you can see the width doesn't adapt to the lengths of the nicks with the result being a large waste of space.
3. Grid
div {
display: grid;
grid-template-columns: repeat(2, auto);
}
.author {
font-weight: bold;
margin-right: 5px;
text-align: right;
}
.author:after {
content: ":";
}
span {
margin-top: 10px;
}<div>
<span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>
<span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span>
</div>This seems to work (gives the desired result) but nonetheless I list this among failed attempts for two reasons:
- This requires me to get rid of
lis and bring allspans to the outer level. This, IIUC, breaks the semanticity of HTML markup, since semantically all thosespans are not on the same level and hence should be grouped. - This makes things more cumbersome if I want to, for example, provide borders, shading, etc, to chat entries. Instead of applying styles to a single
li, I have to apply them to twospans and be careful to make them overlap correctly.
What is the correct way to achieve what I want to achieve?
css width column-width
asked Nov 16 '18 at 22:32
gaazkamgaazkam
2,073937
add a comment |
2
Originally I needed this for a chat app. Now I need it for something else as well... I figure I'd better ask.
Elaborating the chat app example: chat messages are lis, they have two spans: one for the author's nick, the other one for the message, I'd like the size of all spans to be equal (for aesthetic purposes) and grow to fit the longest nick.
Failed attempts:
1. Flexbox
span {
margin-top: 10px;
}
.author {
font-weight: bold;
margin-right: 5px;
}
.author:after {
content: ":";
}
.message {
flex: auto;
}
li {
display: flex;
}<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span></li>
<li><span class="author">SomeOtherLongerNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>As you can see the width of the nick field is not equal among messages which, IMO, is ugly.
2. Fixed width
span {
position: relative;
display: inline-block;
margin-top: 10px;
}
.author {
font-weight: bold;
margin-right: 5px;
width: 30%;
text-align: right;
vertical-align: top;
}
.author:after {
content: ":";
}
.message {
width: 65%;
}
ul {
list-style-type: none;
padding-left: 0;
}<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span></li>
<li><span class="author">nick2</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>As you can see the width doesn't adapt to the lengths of the nicks with the result being a large waste of space.
3. Grid
div {
display: grid;
grid-template-columns: repeat(2, auto);
}
.author {
font-weight: bold;
margin-right: 5px;
text-align: right;
}
.author:after {
content: ":";
}
span {
margin-top: 10px;
}<div>
<span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>
<span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span>
</div>This seems to work (gives the desired result) but nonetheless I list this among failed attempts for two reasons:
- This requires me to get rid of
lis and bring allspans to the outer level. This, IIUC, breaks the semanticity of HTML markup, since semantically all thosespans are not on the same level and hence should be grouped. - This makes things more cumbersome if I want to, for example, provide borders, shading, etc, to chat entries. Instead of applying styles to a single
li, I have to apply them to twospans and be careful to make them overlap correctly.
What is the correct way to achieve what I want to achieve?
css width column-width
asked Nov 16 '18 at 22:32
gaazkamgaazkam
2,073937
I suppose the preference is to do this all with CSS and avoid javascript? JS might be the required trade-off to not using CSS Grid for the reasons you specified.
– Bryce Howitson
Nov 16 '18 at 22:41
1
A list with columns? Sounds like a table to me.
– Alohci
Nov 16 '18 at 22:59
add a comment |
2
2
2
Originally I needed this for a chat app. Now I need it for something else as well... I figure I'd better ask.
Elaborating the chat app example: chat messages are lis, they have two spans: one for the author's nick, the other one for the message, I'd like the size of all spans to be equal (for aesthetic purposes) and grow to fit the longest nick.
Failed attempts:
1. Flexbox
span {
margin-top: 10px;
}
.author {
font-weight: bold;
margin-right: 5px;
}
.author:after {
content: ":";
}
.message {
flex: auto;
}
li {
display: flex;
}<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span></li>
<li><span class="author">SomeOtherLongerNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>As you can see the width of the nick field is not equal among messages which, IMO, is ugly.
2. Fixed width
span {
position: relative;
display: inline-block;
margin-top: 10px;
}
.author {
font-weight: bold;
margin-right: 5px;
width: 30%;
text-align: right;
vertical-align: top;
}
.author:after {
content: ":";
}
.message {
width: 65%;
}
ul {
list-style-type: none;
padding-left: 0;
}<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span></li>
<li><span class="author">nick2</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>As you can see the width doesn't adapt to the lengths of the nicks with the result being a large waste of space.
3. Grid
div {
display: grid;
grid-template-columns: repeat(2, auto);
}
.author {
font-weight: bold;
margin-right: 5px;
text-align: right;
}
.author:after {
content: ":";
}
span {
margin-top: 10px;
}<div>
<span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>
<span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span>
</div>This seems to work (gives the desired result) but nonetheless I list this among failed attempts for two reasons:
- This requires me to get rid of
lis and bring allspans to the outer level. This, IIUC, breaks the semanticity of HTML markup, since semantically all thosespans are not on the same level and hence should be grouped. - This makes things more cumbersome if I want to, for example, provide borders, shading, etc, to chat entries. Instead of applying styles to a single
li, I have to apply them to twospans and be careful to make them overlap correctly.
What is the correct way to achieve what I want to achieve?
css width column-width
asked Nov 16 '18 at 22:32
gaazkamgaazkam
2,073937
Originally I needed this for a chat app. Now I need it for something else as well... I figure I'd better ask.
Elaborating the chat app example: chat messages are lis, they have two spans: one for the author's nick, the other one for the message, I'd like the size of all spans to be equal (for aesthetic purposes) and grow to fit the longest nick.
Failed attempts:
1. Flexbox
span {
margin-top: 10px;
}
.author {
font-weight: bold;
margin-right: 5px;
}
.author:after {
content: ":";
}
.message {
flex: auto;
}
li {
display: flex;
}<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span></li>
<li><span class="author">SomeOtherLongerNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>As you can see the width of the nick field is not equal among messages which, IMO, is ugly.
2. Fixed width
span {
position: relative;
display: inline-block;
margin-top: 10px;
}
.author {
font-weight: bold;
margin-right: 5px;
width: 30%;
text-align: right;
vertical-align: top;
}
.author:after {
content: ":";
}
.message {
width: 65%;
}
ul {
list-style-type: none;
padding-left: 0;
}<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span></li>
<li><span class="author">nick2</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>As you can see the width doesn't adapt to the lengths of the nicks with the result being a large waste of space.
3. Grid
div {
display: grid;
grid-template-columns: repeat(2, auto);
}
.author {
font-weight: bold;
margin-right: 5px;
text-align: right;
}
.author:after {
content: ":";
}
span {
margin-top: 10px;
}<div>
<span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>
<span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span>
</div>This seems to work (gives the desired result) but nonetheless I list this among failed attempts for two reasons:
- This requires me to get rid of
lis and bring allspans to the outer level. This, IIUC, breaks the semanticity of HTML markup, since semantically all thosespans are not on the same level and hence should be grouped. - This makes things more cumbersome if I want to, for example, provide borders, shading, etc, to chat entries. Instead of applying styles to a single
li, I have to apply them to twospans and be careful to make them overlap correctly.
What is the correct way to achieve what I want to achieve?
span {
margin-top: 10px;
}
.author {
font-weight: bold;
margin-right: 5px;
}
.author:after {
content: ":";
}
.message {
flex: auto;
}
li {
display: flex;
}<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span></li>
<li><span class="author">SomeOtherLongerNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>span {
margin-top: 10px;
}
.author {
font-weight: bold;
margin-right: 5px;
}
.author:after {
content: ":";
}
.message {
flex: auto;
}
li {
display: flex;
}<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span></li>
<li><span class="author">SomeOtherLongerNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>span {
position: relative;
display: inline-block;
margin-top: 10px;
}
.author {
font-weight: bold;
margin-right: 5px;
width: 30%;
text-align: right;
vertical-align: top;
}
.author:after {
content: ":";
}
.message {
width: 65%;
}
ul {
list-style-type: none;
padding-left: 0;
}<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span></li>
<li><span class="author">nick2</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>span {
position: relative;
display: inline-block;
margin-top: 10px;
}
.author {
font-weight: bold;
margin-right: 5px;
width: 30%;
text-align: right;
vertical-align: top;
}
.author:after {
content: ":";
}
.message {
width: 65%;
}
ul {
list-style-type: none;
padding-left: 0;
}<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span></li>
<li><span class="author">nick2</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>div {
display: grid;
grid-template-columns: repeat(2, auto);
}
.author {
font-weight: bold;
margin-right: 5px;
text-align: right;
}
.author:after {
content: ":";
}
span {
margin-top: 10px;
}<div>
<span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>
<span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span>
</div>div {
display: grid;
grid-template-columns: repeat(2, auto);
}
.author {
font-weight: bold;
margin-right: 5px;
text-align: right;
}
.author:after {
content: ":";
}
span {
margin-top: 10px;
}<div>
<span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>
<span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span>
</div>css width column-width
css width column-width
asked Nov 16 '18 at 22:32
gaazkamgaazkam
2,073937
asked Nov 16 '18 at 22:32
gaazkamgaazkam
2,073937
asked Nov 16 '18 at 22:32
gaazkamgaazkam
2,073937
asked Nov 16 '18 at 22:32
gaazkamgaazkam
2,073937
asked Nov 16 '18 at 22:32
gaazkamgaazkam
2,073937
2,073937
I suppose the preference is to do this all with CSS and avoid javascript? JS might be the required trade-off to not using CSS Grid for the reasons you specified.
– Bryce Howitson
Nov 16 '18 at 22:41
1
A list with columns? Sounds like a table to me.
– Alohci
Nov 16 '18 at 22:59
add a comment |
I suppose the preference is to do this all with CSS and avoid javascript? JS might be the required trade-off to not using CSS Grid for the reasons you specified.
– Bryce Howitson
Nov 16 '18 at 22:41
1
A list with columns? Sounds like a table to me.
– Alohci
Nov 16 '18 at 22:59
I suppose the preference is to do this all with CSS and avoid javascript? JS might be the required trade-off to not using CSS Grid for the reasons you specified.
– Bryce Howitson
Nov 16 '18 at 22:41
I suppose the preference is to do this all with CSS and avoid javascript? JS might be the required trade-off to not using CSS Grid for the reasons you specified.
– Bryce Howitson
Nov 16 '18 at 22:41
1
1
A list with columns? Sounds like a table to me.
– Alohci
Nov 16 '18 at 22:59
A list with columns? Sounds like a table to me.
– Alohci
Nov 16 '18 at 22:59
add a comment |
1 Answer
1
active
oldest
votes
2
You are almost good with your grid solution. You can keep the li element by introducing display:contents (https://caniuse.com/#feat=css-display-contents) but you will still not be able to style the li since this one will no more generate a box content:
ul {
display: grid;
grid-template-columns: repeat(2, auto);
}
li {
display:contents;
}
.author {
font-weight: bold;
margin-right: 5px;
text-align: right;
}
.author:after {
content: ":";
}
span {
margin-top: 10px;
}<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>
</li>
<li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>Another way is to consider display:table like below:
ul {
display: table;
}
li {
display: table-row;
}
.author {
font-weight: bold;
padding-right: 5px;
text-align: right;
}
.author:after {
content: ":";
}
span {
padding-top: 10px;
display: table-cell;
}<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>
</li>
<li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>answered Nov 16 '18 at 23:07
Temani AfifTemani Afif
67.5k93776
Awesome, thank you! Though, it's worthy to mention, your second table example requires border-spacing for the rows to be separated, as margin is ignored : stackoverflow.com/questions/16398823/…
– gaazkam
Nov 22 '18 at 20:52
@gaazkam that's why I used padding in the second example ;)
– Temani Afif
Nov 22 '18 at 20:53
Yeah but I mean this lastspan { margin-top: 10px; }
– gaazkam
Nov 22 '18 at 20:56
@gaazkam ah forgot this one .. edited
– Temani Afif
Nov 22 '18 at 20:57
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53346283%2fhow-to-make-a-list-with-each-row-divided-into-two-columns-with-the-first-column%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
You are almost good with your grid solution. You can keep the li element by introducing display:contents (https://caniuse.com/#feat=css-display-contents) but you will still not be able to style the li since this one will no more generate a box content:
ul {
display: grid;
grid-template-columns: repeat(2, auto);
}
li {
display:contents;
}
.author {
font-weight: bold;
margin-right: 5px;
text-align: right;
}
.author:after {
content: ":";
}
span {
margin-top: 10px;
}<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>
</li>
<li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>Another way is to consider display:table like below:
ul {
display: table;
}
li {
display: table-row;
}
.author {
font-weight: bold;
padding-right: 5px;
text-align: right;
}
.author:after {
content: ":";
}
span {
padding-top: 10px;
display: table-cell;
}<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>
</li>
<li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>answered Nov 16 '18 at 23:07
Temani AfifTemani Afif
67.5k93776
Awesome, thank you! Though, it's worthy to mention, your second table example requires border-spacing for the rows to be separated, as margin is ignored : stackoverflow.com/questions/16398823/…
– gaazkam
Nov 22 '18 at 20:52
@gaazkam that's why I used padding in the second example ;)
– Temani Afif
Nov 22 '18 at 20:53
Yeah but I mean this lastspan { margin-top: 10px; }
– gaazkam
Nov 22 '18 at 20:56
@gaazkam ah forgot this one .. edited
– Temani Afif
Nov 22 '18 at 20:57
add a comment |
2
You are almost good with your grid solution. You can keep the li element by introducing display:contents (https://caniuse.com/#feat=css-display-contents) but you will still not be able to style the li since this one will no more generate a box content:
ul {
display: grid;
grid-template-columns: repeat(2, auto);
}
li {
display:contents;
}
.author {
font-weight: bold;
margin-right: 5px;
text-align: right;
}
.author:after {
content: ":";
}
span {
margin-top: 10px;
}<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>
</li>
<li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>Another way is to consider display:table like below:
ul {
display: table;
}
li {
display: table-row;
}
.author {
font-weight: bold;
padding-right: 5px;
text-align: right;
}
.author:after {
content: ":";
}
span {
padding-top: 10px;
display: table-cell;
}<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>
</li>
<li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>answered Nov 16 '18 at 23:07
Temani AfifTemani Afif
67.5k93776
Awesome, thank you! Though, it's worthy to mention, your second table example requires border-spacing for the rows to be separated, as margin is ignored : stackoverflow.com/questions/16398823/…
– gaazkam
Nov 22 '18 at 20:52
@gaazkam that's why I used padding in the second example ;)
– Temani Afif
Nov 22 '18 at 20:53
Yeah but I mean this lastspan { margin-top: 10px; }
– gaazkam
Nov 22 '18 at 20:56
@gaazkam ah forgot this one .. edited
– Temani Afif
Nov 22 '18 at 20:57
add a comment |
2
2
2
You are almost good with your grid solution. You can keep the li element by introducing display:contents (https://caniuse.com/#feat=css-display-contents) but you will still not be able to style the li since this one will no more generate a box content:
ul {
display: grid;
grid-template-columns: repeat(2, auto);
}
li {
display:contents;
}
.author {
font-weight: bold;
margin-right: 5px;
text-align: right;
}
.author:after {
content: ":";
}
span {
margin-top: 10px;
}<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>
</li>
<li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>Another way is to consider display:table like below:
ul {
display: table;
}
li {
display: table-row;
}
.author {
font-weight: bold;
padding-right: 5px;
text-align: right;
}
.author:after {
content: ":";
}
span {
padding-top: 10px;
display: table-cell;
}<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>
</li>
<li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>answered Nov 16 '18 at 23:07
Temani AfifTemani Afif
67.5k93776
You are almost good with your grid solution. You can keep the li element by introducing display:contents (https://caniuse.com/#feat=css-display-contents) but you will still not be able to style the li since this one will no more generate a box content:
ul {
display: grid;
grid-template-columns: repeat(2, auto);
}
li {
display:contents;
}
.author {
font-weight: bold;
margin-right: 5px;
text-align: right;
}
.author:after {
content: ":";
}
span {
margin-top: 10px;
}<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>
</li>
<li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>Another way is to consider display:table like below:
ul {
display: table;
}
li {
display: table-row;
}
.author {
font-weight: bold;
padding-right: 5px;
text-align: right;
}
.author:after {
content: ":";
}
span {
padding-top: 10px;
display: table-cell;
}<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>
</li>
<li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>ul {
display: grid;
grid-template-columns: repeat(2, auto);
}
li {
display:contents;
}
.author {
font-weight: bold;
margin-right: 5px;
text-align: right;
}
.author:after {
content: ":";
}
span {
margin-top: 10px;
}<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>
</li>
<li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>ul {
display: grid;
grid-template-columns: repeat(2, auto);
}
li {
display:contents;
}
.author {
font-weight: bold;
margin-right: 5px;
text-align: right;
}
.author:after {
content: ":";
}
span {
margin-top: 10px;
}<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>
</li>
<li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>ul {
display: table;
}
li {
display: table-row;
}
.author {
font-weight: bold;
padding-right: 5px;
text-align: right;
}
.author:after {
content: ":";
}
span {
padding-top: 10px;
display: table-cell;
}<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>
</li>
<li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>ul {
display: table;
}
li {
display: table-row;
}
.author {
font-weight: bold;
padding-right: 5px;
text-align: right;
}
.author:after {
content: ":";
}
span {
padding-top: 10px;
display: table-cell;
}<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>
</li>
<li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>answered Nov 16 '18 at 23:07
Temani AfifTemani Afif
67.5k93776
edited Nov 22 '18 at 20:57
answered Nov 16 '18 at 23:07
Temani AfifTemani Afif
67.5k93776
answered Nov 16 '18 at 23:07
Temani AfifTemani Afif
67.5k93776
answered Nov 16 '18 at 23:07
Temani AfifTemani Afif
67.5k93776
67.5k93776
Awesome, thank you! Though, it's worthy to mention, your second table example requires border-spacing for the rows to be separated, as margin is ignored : stackoverflow.com/questions/16398823/…
– gaazkam
Nov 22 '18 at 20:52
@gaazkam that's why I used padding in the second example ;)
– Temani Afif
Nov 22 '18 at 20:53
Yeah but I mean this lastspan { margin-top: 10px; }
– gaazkam
Nov 22 '18 at 20:56
@gaazkam ah forgot this one .. edited
– Temani Afif
Nov 22 '18 at 20:57
add a comment |
Awesome, thank you! Though, it's worthy to mention, your second table example requires border-spacing for the rows to be separated, as margin is ignored : stackoverflow.com/questions/16398823/…
– gaazkam
Nov 22 '18 at 20:52
@gaazkam that's why I used padding in the second example ;)
– Temani Afif
Nov 22 '18 at 20:53
Yeah but I mean this lastspan { margin-top: 10px; }
– gaazkam
Nov 22 '18 at 20:56
@gaazkam ah forgot this one .. edited
– Temani Afif
Nov 22 '18 at 20:57
Awesome, thank you! Though, it's worthy to mention, your second table example requires border-spacing for the rows to be separated, as margin is ignored : stackoverflow.com/questions/16398823/…
– gaazkam
Nov 22 '18 at 20:52
Awesome, thank you! Though, it's worthy to mention, your second table example requires border-spacing for the rows to be separated, as margin is ignored : stackoverflow.com/questions/16398823/…
– gaazkam
Nov 22 '18 at 20:52
@gaazkam that's why I used padding in the second example ;)
– Temani Afif
Nov 22 '18 at 20:53
@gaazkam that's why I used padding in the second example ;)
– Temani Afif
Nov 22 '18 at 20:53
Yeah but I mean this last
span { margin-top: 10px; }– gaazkam
Nov 22 '18 at 20:56
Yeah but I mean this last
span { margin-top: 10px; }– gaazkam
Nov 22 '18 at 20:56
@gaazkam ah forgot this one .. edited
– Temani Afif
Nov 22 '18 at 20:57
@gaazkam ah forgot this one .. edited
– Temani Afif
Nov 22 '18 at 20:57
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53346283%2fhow-to-make-a-list-with-each-row-divided-into-two-columns-with-the-first-column%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I suppose the preference is to do this all with CSS and avoid javascript? JS might be the required trade-off to not using CSS Grid for the reasons you specified.
– Bryce Howitson
Nov 16 '18 at 22:41
1
A list with columns? Sounds like a table to me.
– Alohci
Nov 16 '18 at 22:59