Do I need a vacuous <div> to accomplish this, or is there something I
can apply to the selector that actually contains text?
I am formatting some letters. Each letter is headed by a dateline of
two or three short lines, such as
Villa Miranda
Corfu
Thursday
I put this block against the right-hand margin, but have the lines
within it aligned at the left. In other words, the last character of
the longest line is against the right margin, and the first character
of the shorter lines are left-aligned with the first character of the
longest line. This all works fine, with this selector:
p.letterdateline { float:right;
margin-left:auto; margin-right:0;
text-align:left; text-indent:0; }
I want the first line of the letter ("Dear Smith:") to begin (at the
left) on the next line after the last line of the class
letterdateline heading. I know I can get that by inserting <div style="clear:both"></div> after the </p> of the letterdateline, but I
hate using vacuous elements.
I had hoped to use the ::after pseudo-element, like this:
p.letterdateline::after { clear:both; }
but when I do that the text of the letter flows around the dateline
header, rather than beginning on the next line as I wish. (Tried in
the latest Chrome and Firefox.)
Is a vacuous <div> the only way to do what I want, or can I do
something with the p.letterdateline selector?
Do I need a vacuous <div> to accomplish this, or is there something I
can apply to the selector that actually contains text?
I am formatting some letters. Each letter is headed by a dateline of
two or three short lines, such as
Villa Miranda
Corfu
Thursday
I put this block against the right-hand margin, but have the lines
within it aligned at the left. In other words, the last character of
the longest line is against the right margin, and the first character
of the shorter lines are left-aligned with the first character of the
longest line. This all works fine, with this selector:
I want the first line of the letter ("Dear Smith:") to begin (at the
left) on the next line after the last line of the class
letterdateline heading. I know I can get that by inserting <div style="clear:both"></div> after the </p> of the letterdateline, but I
hate using vacuous elements.
In Message <MPG.3cf17696f2a0a79898ff3a@news.individual.net>
On Fri, 20 May 2022 10:58:20 -0700
Stan Brown <the_stan_brown@fastmail.fm> wrote:
Do I need a vacuous <div> to accomplish this, or is there something I
can apply to the selector that actually contains text?
I suggest that display grid just may be what you are looking for.
I am formatting some letters. Each letter is headed by a dateline of
two or three short lines, such as
Villa Miranda
Corfu
Thursday
I put this block against the right-hand margin, but have the lines
within it aligned at the left. In other words, the last character of
the longest line is against the right margin, and the first character
of the shorter lines are left-aligned with the first character of the longest line. This all works fine, with this selector:
[snip]
I want the first line of the letter ("Dear Smith:") to begin (at the
left) on the next line after the last line of the class
letterdateline heading. I know I can get that by inserting <div style="clear:both"></div> after the </p> of the letterdateline, but I
hate using vacuous elements.
[snip]
div {
display: grid;
row-gap: 1ex;
margin-right: 0;
margin-left: auto;
width: fit-content;
outline: solid blue thin;
}
div > p {
margin: 0;
line-height: 1;
}
div > p {
grid-column: 2;
}
div > p + p {
grid-column: 1;
}
<div>
<p>
Villa Miranda
</p>
<p>
Corfu
</p>
<p>
Thursday
</p>
</div>
That should display similarly to a table.
table {
border-collapse: collapse;
margin-right: 0;
margin-left: auto;
outline: solid blue thin;
}
td {
padding: 0;
line-height: 1;
}
td + td {
text-align: right;
}
<table>
<tr>
<td></td>
<td>
Villa Miranda
</td>
</tr>
<tr>
<td>
Corfu
</td>
<td></td>
</tr>
<tr>
<td>
Thursday
</td>
<td></td>
</tr>
</table>
IF you are going to insist on using a float, post an example of the
HTML you are using. There are a few ways to clear floats, but I see no
need to use a float in this example.
In article <MPG.3cf17696f2a0a79898ff3a@news.individual.net>, Stan Brown wrote...
I am formatting some letters. Each letter is headed by a dateline of
two or three short lines, such as
Villa Miranda
Corfu
Thursday
I put this block against the right-hand margin, but have the lines
within it aligned at the left. In other words, the last character of
the longest line is against the right margin, and the first character
of the shorter lines are left-aligned with the first character of the longest line. This all works fine, with this selector:
p.letterdateline { float:right;
margin-left:auto; margin-right:0;
text-align:left; text-indent:0; }
I want the first line of the letter ("Dear Smith:") to begin (at the
left) on the next line after the last line of the class
letterdateline heading. I know I can get that by inserting <div style="clear:both"></div> after the </p> of the letterdateline, but I
hate using vacuous elements.
I had hoped to use the ::after pseudo-element, like this:
p.letterdateline::after { clear:both; }
but when I do that the text of the letter flows around the dateline
header, rather than beginning on the next line as I wish. (Tried in
the latest Chrome and Firefox.)
Is a vacuous <div> the only way to do what I want, or can I do
something with the p.letterdateline selector?
Interesting puzzle. I bet there's a compelling and elegant solution, but I don't know what it is...
First observation is that this may possibly not be an appropriate use of 'float'. You choose float when you *do* want other elements to flow around the
floated object. But perhaps there's a logo or whatever that you do want to appear to the left of this "address" block, so the float is needed. Otherwise,
all you need to do is have a 100% wide block, text-align'd to the right.
Secondly, it's arguable that you're trying to put into a rule for one object properties which are to apply to another (the following element). Something about that doesn't seem quite right!
I think I've spotted why your code didn't work. Picking through Eric Meyer & Estelle Weyle's "Definitive Guide to CSS" (4th Edition) I see the ::after pseudo-selector can take a 'content' property which makes explicit what it is you are inserting after the element, optionally followed by any other properties include styling. So you could have:
p.letterdateline::after {content: "hello"; color: red}
But you aren't inserting anything, so the styling you apply doesn't have a target. Try this:
p.letterdateline::after {" "; clear:both}
Otherwise, going back to the notion that you're really targeting the properties
of the element following your address block, the "adjacent sibling" selector '+' may do the trick.
p.letterdateline + p {clear:both}
This may be generalisable to any adjacent sibling:
p.letterdateline + * {clear:both}
On Sat, 21 May 2022 19:27:04 +0100, Philip
Herlihy wrote:
In article <MPG.3cf17696f2a0a79898ff3a@news.individual.net>, Stan Brown wrote...
I am formatting some letters. Each letter is headed by a dateline of
two or three short lines, such as
Villa Miranda
Corfu
Thursday
I put this block against the right-hand margin, but have the lines
within it aligned at the left. In other words, the last character of
the longest line is against the right margin, and the first character
of the shorter lines are left-aligned with the first character of the longest line. This all works fine, with this selector:
p.letterdateline { float:right;
margin-left:auto; margin-right:0;
text-align:left; text-indent:0; }
I want the first line of the letter ("Dear Smith:") to begin (at the left) on the next line after the last line of the class
letterdateline heading. I know I can get that by inserting <div style="clear:both"></div> after the </p> of the letterdateline, but I hate using vacuous elements.
I had hoped to use the ::after pseudo-element, like this:
p.letterdateline::after { clear:both; }
but when I do that the text of the letter flows around the dateline header, rather than beginning on the next line as I wish. (Tried in
the latest Chrome and Firefox.)
Is a vacuous <div> the only way to do what I want, or can I do
something with the p.letterdateline selector?
Interesting puzzle. I bet there's a compelling and elegant solution, but I don't know what it is...
But in the course of writing your reply, you
hit upon the C & E S.
First observation is that this may possibly not be an appropriate use of 'float'. You choose float when you *do* want other elements to flow around the
floated object. But perhaps there's a logo or whatever that you do want to appear to the left of this "address" block, so the float is needed. Otherwise,
all you need to do is have a 100% wide block, text-align'd to the right.
text-align:right is no good. That will line up
the _last_ character of each line, but I want
to line up the _first_ character of each line.
Secondly, it's arguable that you're trying to put into a rule for one object
properties which are to apply to another (the following element). Something
about that doesn't seem quite right!
I think I've spotted why your code didn't work. Picking through Eric Meyer &
Estelle Weyle's "Definitive Guide to CSS" (4th Edition) I see the ::after pseudo-selector can take a 'content' property which makes explicit what it is
you are inserting after the element, optionally followed by any other properties include styling. So you could have:
p.letterdateline::after {content: "hello"; color: red}
But you aren't inserting anything, so the styling you apply doesn't have a target. Try this:
p.letterdateline::after {" "; clear:both}
I tried this with and without display:block,
and the following lines moved up and to the
left of the dateline.
Otherwise, going back to the notion that you're really targeting the properties
of the element following your address block, the "adjacent sibling" selector
'+' may do the trick.
p.letterdateline + p {clear:both}
This may be generalisable to any adjacent sibling:
p.letterdateline + * {clear:both}
Bingo! This was a winner. It did exactly what
I want, without the extra vacuous <div>.
Thank you very much!
div {
display: grid;
row-gap: 1ex;
margin-right: 0;
margin-left: auto;
width: fit-content;
outline: solid blue thin;
}
div > p {
margin: 0;
line-height: 1;
}
div > p {
grid-column: 2;
}
div > p + p {
grid-column: 1;
}
<div>
<p>
Villa Miranda
</p>
<p>
Corfu
</p>
<p>
Thursday
</p>
</div>
That should display similarly to a table.
table {
border-collapse: collapse;
margin-right: 0;
margin-left: auto;
outline: solid blue thin;
}
td {
padding: 0;
line-height: 1;
}
td + td {
text-align: right;
}
<table>
<tr>
<td></td>
<td>
Villa Miranda
</td>
</tr>
<tr>
<td>
Corfu
</td>
<td></td>
</tr>
<tr>
<td>
Thursday
</td>
<td></td>
</tr>
</table>
On Sat, 21 May 2022 14:59:11 -0400, J???? ????
wrote:
In Message <MPG.3cf17696f2a0a79898ff3a@news.individual.net>
On Fri, 20 May 2022 10:58:20 -0700
Stan Brown <the_stan_brown@fastmail.fm> wrote:
Do I need a vacuous <div> to accomplish this, or is there something I
can apply to the selector that actually contains text?
I suggest that display grid just may be what you are looking for.
I am formatting some letters. Each letter is headed by a dateline of
two or three short lines, such as
Villa Miranda
Corfu
Thursday
I put this block against the right-hand margin, but have the lines
within it aligned at the left. In other words, the last character of
the longest line is against the right margin, and the first character
of the shorter lines are left-aligned with the first character of the longest line. This all works fine, with this selector:
[snip]
I want the first line of the letter ("Dear Smith:") to begin (at the left) on the next line after the last line of the class
letterdateline heading. I know I can get that by inserting <div style="clear:both"></div> after the </p> of the letterdateline, but I hate using vacuous elements.
[snip]
div {
display: grid;
row-gap: 1ex;
margin-right: 0;
margin-left: auto;
width: fit-content;
outline: solid blue thin;
}
div > p {
margin: 0;
line-height: 1;
}
div > p {
grid-column: 2;
}
div > p + p {
grid-column: 1;
}
<div>
<p>
Villa Miranda
</p>
<p>
Corfu
</p>
<p>
Thursday
</p>
</div>
That should display similarly to a table.
table {
border-collapse: collapse;
margin-right: 0;
margin-left: auto;
outline: solid blue thin;
}
td {
padding: 0;
line-height: 1;
}
td + td {
text-align: right;
}
<table>
<tr>
<td></td>
<td>
Villa Miranda
</td>
</tr>
<tr>
<td>
Corfu
</td>
<td></td>
</tr>
<tr>
<td>
Thursday
</td>
<td></td>
</tr>
</table>
IF you are going to insist on using a float, post an example of the
HTML you are using. There are a few ways to clear floats, but I see no
need to use a float in this example.
Thanks for responding.
I had never heard of display:grid, but when I
looked it up I saw that it's necessary to
define sizes of rows and columns, and I won't
know that in advance.
The table with margin-right: 0; margin-left:
auto; looks as though it ought to work, and I
hadn't thought of that. But it's a lot more
HTML tags than a simple <p>.
I ended up using Philip Herlihy's solution:
p.letterdateline + * { clear:both; }
It worked for me, with no extra HTML and just
one line of styling.
In article <MPG.3cf2f7cee228ce898ff23@news.individual.net>, Stan Brown wrote...
text-align:right is no good. That will line up
the _last_ character of each line, but I want
to line up the _first_ character of each line.
### Indeed I had somehow failed to register that - sorry! In fact the more I study your p.letterdateline selector above, the less I understand how it works
(yes, I'm rusty with CSS!). Does each address line have its own p.letterdateline, or is there just one, using <BR> tags to lay out the three lines? I'm guessing the latter.
In article <568c10e8-648d1ff0-17220c13.tiberius@james.kirk.invalid>, J???? ????[stuff with display:grid]
wrote...
That works! I have to say I have a real blind-spot for grid and flexbox. I get very little time these days to fool about with CSS, and it's often only when someone posts something interesting here that I get to think about it at all - while the skills I did have are atrophying all the time.
I've looked at flexbox, but while it makes sense in the tutorials, it seems to
me that you have to spend time working through examples really to get the hang
of it, and time's short for me. Once I master flexbox (and I really must) I'll
move on to grid. But it's clear that yours is the elegant and compelling solution to go for.
Do I need a vacuous <div> to accomplish this, or is there something I
can apply to the selector that actually contains text?
I am formatting some letters. Each letter is headed by a dateline of
two or three short lines, such as
Villa Miranda
Corfu
Thursday
I put this block against the right-hand margin, but have the lines
within it aligned at the left. In other words, the last character of
the longest line is against the right margin, and the first character
of the shorter lines are left-aligned with the first character of the
longest line. This all works fine, with this selector:
p.letterdateline { float:right;
margin-left:auto; margin-right:0;
text-align:left; text-indent:0; }
I want the first line of the letter ("Dear Smith:") to begin (at the
left) on the next line after the last line of the class
letterdateline heading. I know I can get that by inserting <div style="clear:both"></div> after the </p> of the letterdateline, but I
hate using vacuous elements.
[....]
Is a vacuous <div> the only way to do what I want, or can I do
something with the p.letterdateline selector?
I just discovered this newsgroup. I wonder whether anybody is still
around. We'll see.
On Wed, 5 Feb 2025 12:57:44 +0100, Siard wrote:
I just discovered this newsgroup. I wonder whether anybody is still
around. We'll see.
Yep. The activity is light, and I mostly lurk.
| Sysop: | Keyop |
|---|---|
| Location: | Huddersfield, West Yorkshire, UK |
| Users: | 495 |
| Nodes: | 16 (2 / 14) |
| Uptime: | 45:04:12 |
| Calls: | 9,745 |
| Calls today: | 5 |
| Files: | 13,742 |
| Messages: | 6,184,218 |
