I'm trying to get two different pieces of text on opposite ends of the "page" so to speak for a mobile app.
I would like it to look like this:
|-----------------------------| |DATE MESSAGE|
But on the same line.
Currently I've got it setup like this:
<div id="HASH" class="blue-msg"> <span id="time-HASH" class="smalltext">9 months 2 weeks ago</span> <span class="ios-circle">MESSAGE HERE</span> </div>
With the ios-circle span having display: inline-block
set.
MESSAGE can also go on for multiple lines (like an iOS chat window), like so:
|-----------------------------| |DATE MESSAGE| | MESSAGE|
I don't care if the DATE text is aligned near the top of the message or near the center of the message. Either would look fine to me.
How do I do this? I would very much prefer to not use a float if possible.
The most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.
To get all elements to appear on one line the easiest way is to: Set white-space property to nowrap on a parent element; Have display: inline-block set on all child elements.
The best way to use is white-space: nowrap; This will align the text to one line.
To set text alignment in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property text-align for the center, left and right alignment.
Use flexbox, like this
#HASH { display: flex; justify-content: space-between; }
P.S.: If the "MESSAGE HERE" content is supposed to expand across multiple lines, I would put it in a div
(instead of span
) and restrict its width to 50% (adjust value as you like).
#HASH { display: flex; justify-content: space-between; }
<div id="HASH" class="blue-msg"> <span id="time-HASH" class="smalltext">9 months 2 weeks ago</span> <span class="ios-circle">MESSAGE HERE</span> </div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With