I am trying to float a preformatted block of text to the right of a page, keeping the text aligned to the left of the block so that I get a right-aligned paragraph containing left-justified text. This works quite well:
<html>
<head>
<style>
pre {
display: flex;
justify-content: flex-end;
text-align: left;
}
</style>
</head>
<body>
<pre>
A preformatted para with
various stuff
inside it.
</pre>
</body>
</html>
The problem is that when I add a textarea to this (for example, inserting <textarea>foo</textarea> after the first line of the <pre> para), the line breaks before and after the textarea are ignored.
It works when I wrap the <pre> in a <div> and then apply the style to the <div>:
<html>
<head>
<style>
div {
display: flex;
justify-content: flex-end;
text-align: left;
}
</style>
</head>
<body>
<div>
<pre>
A preformatted para with a
<textarea>textarea</textarea>
and other stuff
inside it.
</pre>
</div>
</body>
</html>
but unfortunately the HTML is not under my control, so I can't do this. I could do this with a table if I was able to control the HTML; and I can't find a way to do it with float:right because the surrounding text appears alongside the floated para.
Is there any way to make this work as I had expected, changing only the CSS?
Edit: here are some images, using the code shown above:
The original code:
After adding a textbox:
The desired effect using an enclosing div:
I am trying to float a preformatted block of text to the right of a page, keeping the text aligned to the left of the block so that I get a right-aligned paragraph containing left-justified text. This works quite well:
<html>
<head>
<style>
pre {
display: flex;
justify-content: flex-end;
text-align: left;
}
</style>
</head>
<body>
<pre>
A preformatted para with
various stuff
inside it.
</pre>
</body>
</html>
The problem is that when I add a textarea to this (for example, inserting <textarea>foo</textarea> after the first line of the <pre> para), the line breaks before and after the textarea are ignored.
It works when I wrap the <pre> in a <div> and then apply the style to the <div>:
<html>
<head>
<style>
div {
display: flex;
justify-content: flex-end;
text-align: left;
}
</style>
</head>
<body>
<div>
<pre>
A preformatted para with a
<textarea>textarea</textarea>
and other stuff
inside it.
</pre>
</div>
</body>
</html>
but unfortunately the HTML is not under my control, so I can't do this. I could do this with a table if I was able to control the HTML; and I can't find a way to do it with float:right because the surrounding text appears alongside the floated para.
Is there any way to make this work as I had expected, changing only the CSS?
Edit: here are some images, using the code shown above:
The original code:
After adding a textbox:
The desired effect using an enclosing div:
Share Improve this question edited Jan 19 at 20:49 user1636349 asked Jan 19 at 20:09 user1636349user1636349 5481 gold badge5 silver badges23 bronze badges 4- Is there a way that I can post a screenshot? Or, plan B: Copy the code at the topy and save it in a .html file, then open it with your browser. Then insert a textarea after the first line. Then try the second chunk of example code. – user1636349 Commented Jan 19 at 20:34
- Ah, thanks. I've done that now. – user1636349 Commented Jan 19 at 20:50
- 1 I'm curious about the context here. Without some idea of how this is going to fit in with other content on the page it's hard to offer suggestions. – Paulie_D Commented Jan 19 at 21:29
- It's a separate paragraph, hence I can't use float:right, but I want it to take up minimum space on the right with a blank area to the left without losing the left justification. – user1636349 Commented Jan 20 at 9:39
1 Answer
Reset to default 4Rather than using flexbox to shift the pre element, just use a margin.
pre {
margin-inline-start: auto; /* or margin-left if you prefer */
width: fit-content;
} <pre>
A preformatted para with a
<textarea>foo</textarea>
and various stuff
inside it.
<pre>