Help with putting three spans horizontally side by side

I’m trying to have .text, square1, and text2 all line up horizontally, next to each other on a single line. Currently they are on the same line, but aren’t side by side, they are bunched together at the beginning of the line. Here’s the code:

<section class="animation-box">
<span class="text">THIS</span><span class="square1"></span><span class="text2">THAT</span><br>
</section>
.animation-box{
  min-height: 4.5rem;
  margin: 175px auto 0;
  align-items: center;
  width: 100%;
  overflow:hidden;
}

.animation-box span {
display: block;
margin: 0 .15em;
opacity: 0;
animation: leftFadeInOut 18.50s ease 2.75s forwards;
}

.text {
font-size:30px;
color:#000;
display: inline-block;
}

.square1
{
width: 1.75vw;
height: 1.75vw;
background: #ccc;
display: inline-block;
}

text2
{
font-size:30px;
color:#fff;
display: inline-block;
}

Any help is appreciated

Not giving the spans the property display: block; should be a good start.

1 Like

Thanks for your reply.
I have removed display: block and restested, no change.
Any other suggestions are welcomed

Not really sure what you are trying but you had a missing class selector on text2 and the display:block in .animation span would over-ride the inline-block due to specificity.

I think you meant this.

.animation-box {
  min-height: 4.5rem;
  margin: 175px auto 0;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

.animation-box span {
  margin: 0 0.15em;
  display: inline-block;
  vertical-align: middle;
  /*opacity: 0;*/
  animation: leftFadeInOut 18.5s ease 2.75s forwards;
}

.text {
  font-size: 30px;
  color: #000;
  background: green;
}

.square1 {
  width: 1.75vw;
  height: 1.75vw;
  background: #ccc;
  background: blue;
}

.text2 {
  font-size: 30px;
  color: #fff;
  background: red;
}

Background property added for testing and opacity commented out (I assume you had some keyframes to go with this).

As @SamA74 said the block display in the parent rule needed to be removed as it was not overridden by the later rules because they had lower specificity.

The parent rule also give them the opacity of zero, so they aren’t even visible.

Is your posted code the same as the now tested code?

1 Like

Thanks for the replies. This is the current code, as suggested. However, same outcome. No change.

.animation-box {
  min-height: 4.5rem;
  margin: 175px auto 0;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

.animation-box span {
  margin: 0 0.15em;
  display: inline-block;
  vertical-align: middle;
  opacity: 0;
  animation: leftFadeInOut 18.5s ease 2.75s forwards;
}

.text {
  font-size: 30px;
  color: #000;
}

.square1 {
  width: 1.75vw;
  height: 1.75vw;
}

.text2 {
  font-size: 30px;
  color: #fff;
}

Any additional help with getting the ‘text’, ‘square1’, ‘text2’ side by side, on the same line instead of bunched together at the beginning of the line, is appreciated.

To get the boxes aligned in the center of the line I think you should try change the “align-items” property to “text-align”.

The property align-items is only effective in a flexbox container, this is a container with inline content where text-align would be effictive:

.animation-box {
  min-height: 4.5rem;
  margin: 175px auto 0;
  /* align-items: center; */
  text-align: center;
  width: 100%;
  overflow: hidden;
}

Much thanks again,
I’m not really trying to “get the boxes aligned in the center of the line”, but to spread out the ‘text’ ‘square2’ ‘text2’ spans, horizontally next to each other, right now they are all scrambled together at the begining of the line.
However, no change in regard to the text-align suggestion.
Any other ideas are welcomed.
thanks again

OK, to finally solv this issue is your code made to work as you requested in two versions with similar display. They are examples of what your code seems to be aimed at, either flexbox or inline context.

They both look like:

Test-Example

Using flexbox for aligning:

<!DOCTYPE html><html><head><meta charset="utf-8">
<title>Untitled</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.animation-box {
  min-height: 4.5rem;
  margin: 175px auto 0;
  display: flex; /* added to make it a flexbox container */
  justify-content: center; /* added for horizontal alignment */
  align-items: center; /* vertical alignment */
  width: 100%;
  overflow: hidden;
}
.animation-box span {
  margin: 0 0.15em;
  display: inline-block;
  /* vertical-align: middle; *//* not effective in flexbox */
  border: 1px dashed black; /* added for clarity */
  /*opacity: 0;*/ /* removed to become visible */
  animation: leftFadeInOut 18.5s ease 2.75s forwards;
}
.text {
  font-size: 30px;
  color: #000;
}
.square1 {
  width: 1.75vw;
  height: 1.75vw;
}
 .text2 {
  font-size: 30px;
  color: #ccc;
}
</style>
</head><body>

<section class="animation-box">
  <span class="text">THIS</span>
  <span class="square1"></span>
  <span class="text2">THAT</span><br>
</section>

</body></html>

Using text-align and vertical-align:

<!DOCTYPE html><html><head><meta charset="utf-8">
<title>Untitled</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.animation-box {
  min-height: 4.5rem;
  margin: 175px auto 0;
  text-align: center; /* horizontal alignment */
  width: 100%;
  overflow: hidden;
}
.animation-box span {
  margin: 0 0.15em;
  display: inline-block;
  border: 1px dashed black; /* added for clarity */
  vertical-align: middle; /* vertical alignment */
  /*opacity: 0;*/ /* removed to become visible */
  animation: leftFadeInOut 18.5s ease 2.75s forwards;
}
.text {
  font-size: 30px;
  color: #000;
}
.square1 {
  width: 1.75vw;
  height: 1.75vw; 
}
.text2 {
  font-size: 30px;
  color: #ccc; 
}
</style>
</head><body>

<section class="animation-box">
  <span class="text">THIS</span>
  <span class="square1"></span>
  <span class="text2">THAT</span><br>
</section>

</body></html>
1 Like

I think we are still misunderstanding what you want. Do you want ‘this’ on the left and ‘that’ on the far right and the square in the middle?

Or do you want them as Eric suggests just in the middle?

Or something else?

1 Like

Thanks for your replies.
Yes, “‘this’ on the left and ‘that’ on the far right and the square in the middle”.

And thanks for this code. I have tested this:

<!DOCTYPE html><html><head><meta charset="utf-8">
<title>Untitled</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.animation-box {
  min-height: 4.5rem;
  margin: 175px auto 0;
  display: flex; /* added to make it a flexbox container */
  justify-content: center; /* added for horizontal alignment */
  align-items: center; /* vertical alignment */
  width: 100%;
  overflow: hidden;
}
.animation-box span {
  margin: 0 0.15em;
  display: inline-block;
 /* vertical-align: middle; *//* not effective in flexbox */
/*  border: 1px dashed black;*/ /* added for clarity */
  opacity: 0; /* this apparently keeps it hidden until the animation begins */
  animation: leftFadeInOut 18.5s ease 2.75s forwards;
}
.text {
  font-size: 30px;
  color: #000;
}
.square1 {
  width: 1.75vw;
  height: 1.75vw;
background-color: #ccc;
}
 .text2 {
  font-size: 30px;
  color: #fff;
}
</style>
</head><body>

<section class="animation-box">
  <span class="text">THIS</span>
  <span class="square1"></span>
  <span class="text2">THAT</span><br>
</section>

</body></html>

And it works well, thanks, which means it displays THIS on the left and THAT on the right, however ‘square1’ isn’t a square. Instead of being a square, the entire horizontal span shows #ccc, as the background color (as if the square is the full width of the anmination span). Any ideas on changing that where square1 is a #ccc square the size of W1.75vx by H1.75vw?

I look forward to further assistance/guidance.

I said the post I made was final. :wink:

Are you really posting all relevant code?

The posted code doesn’t animate so if that’s important for the test, where’s the keyframe for the animation?

Thanks for your reply.
Here is the keyframe code, I just didn’t think it was relevant to positioning three spans on a line.

@keyframes leftFadeInOut {
  0%,33% { position: absolute; left: 1rem; opacity: 0; }
  75% { position: absolute; left: 40rem; opacity: 1;}
  100% { position: absolute; left: 79.5rem; opacity: 0;}
}

Any other replies are welcomed.

So how does the whole code you’re testing look like?

I suggest you take the setup you last tested and make a stand alone of it all and post next with an explaing of exactly what you’re trying to achive.

Then this could be solved by the next member reading what you really want. :slight_smile:

1 Like

I’m now simply trying to have a square appear between THIS and THAT.
I tried removing square1 code altogether and replaced it with an image like so:

<span class="text">THIS&nbsp;<img src="../images/box.jpg"></span><span class="text2">THAT</span>

and it works, but I thought their might be a better way, via code instead on jpg. If this is the only solution, then I was going to look for some guidance with shrinking that image for mobile view:

@media only screen and (max-width: 720px)
{ 
etc...

any additional ideas are welcomed.

What was wrong with the gray square exactly? Why would you want to use an image?

I;m still not getting what you are doing especially with the animation.

Here’s your code without the animation but adjusted with this on the left and that on the right as mentioned.

What is it that you want different from the above and what do you want to happen when you animate it?

1 Like