I Don't Understand This

[Stinky666]

This is just some simple html/css and it isn't working how it should be, at all. I literally can not wrap my head around why.


<font style="float: left; font-size: 30px;  color: #6D2B82;font-weight: bolder;">10</font><i>  Left Text Here</i><i style="float: right;">Right Text Here</i><font style="float: right;font-size: 30px; color: #6D2B82; font-weight: bolder;">  15</font>

For some reason, the above code is appearing like this:
10 Left Text Here < --------------------------> 15 Right Text Here

It SHOULD appear like, right? And it's how I want it to:
10 Left Text Here < --------------------------> Right Text Here 15


So the number 15 is appearing BEFORE the text on the right, even though the code is telling it to appear right.
I am genuinely confused. I don't get it


< --------------------------> represents the gap between, as you can probably guess.

---

The place I am using this code, does not allow divs or tables, it only allows:

a, p, i, strong, b, u, ul, ol, li, h1, h2, h3, img, font, br

[Star's Legacy]

Try removing the float from the 15 and incorporate it under the float from the right text here and see if that helps.

So like this;

<font style="float: left; font-size: 30px; color: #6D2B82;font-weight: bolder;">10</font><i>  Left Text Here</i><i style="float: right;">Right Text Here<font style="font-size: 30px; color: #6D2B82; font-weight: bolder;">  15</font></i>

[Stinky666]

Mar 9, 2017 20:10:37 GMT -8 Star's Legacy said:

Try removing the float from the 15 and incorporate it under the float from the right text here and see if that helps.

So like this;

<font style="float: left; font-size: 30px; color: #6D2B82;font-weight: bolder;">10</font><i>  Left Text Here</i><i style="float: right;">Right Text Here<font style="font-size: 30px; color: #6D2B82; font-weight: bolder;">  15</font></i>

Ok that worked, thanks.
I also added font-style: normal; to obviously get rid of the italics on the numbers.

Can you, or anyone else explain why the way I did it, didn't work? I'd love to be able to understand so I don't make the same mistake again.

[Tumbleweed]

Mar 9, 2017 19:45:07 GMT -8 Stinky666 said:

This is just some simple html/css and it isn't working how it should be, at all. I literally can not wrap my head around why.


<font style="float: left; font-size: 30px;  color: #6D2B82;font-weight: bolder;">10</font><i>  Left Text Here</i><i style="float: right;">Right Text Here</i><font style="float: right;font-size: 30px; color: #6D2B82; font-weight: bolder;">  15</font>

For some reason, the above code is appearing like this:
10 Left Text Here < --------------------------> 15 Right Text Here

It SHOULD appear like, right? And it's how I want it to:
10 Left Text Here < --------------------------> Right Text Here 15


So the number 15 is appearing BEFORE the text on the right, even though the code is telling it to appear right.
I am genuinely confused. I don't get it


< --------------------------> represents the gap between, as you can probably guess.

---

The place I am using this code, does not allow divs or tables, it only allows:

a, p, i, strong, b, u, ul, ol, li, h1, h2, h3, img, font, br

If you float an element to the left, any text or other elements following it will flow around it to the right. And if you float an element to the right, any text or other elements following it will flow around it to the left. So your having the <i style="float:right">15</i> last makes it float to the left of your first element floating right. So you have to swap the order of the right floating elements,which can be a bit confusing but that's just how it works.

[Stinky666]

Mar 9, 2017 21:08:54 GMT -8 Tumbleweed said:

Mar 9, 2017 19:45:07 GMT -8 Stinky666 said:

This is just some simple html/css and it isn't working how it should be, at all. I literally can not wrap my head around why.


<font style="float: left; font-size: 30px;  color: #6D2B82;font-weight: bolder;">10</font><i>  Left Text Here</i><i style="float: right;">Right Text Here</i><font style="float: right;font-size: 30px; color: #6D2B82; font-weight: bolder;">  15</font>

For some reason, the above code is appearing like this:
10 Left Text Here < --------------------------> 15 Right Text Here

It SHOULD appear like, right? And it's how I want it to:
10 Left Text Here < --------------------------> Right Text Here 15


So the number 15 is appearing BEFORE the text on the right, even though the code is telling it to appear right.
I am genuinely confused. I don't get it


< --------------------------> represents the gap between, as you can probably guess.

---

The place I am using this code, does not allow divs or tables, it only allows:

a, p, i, strong, b, u, ul, ol, li, h1, h2, h3, img, font, br

If you float an element to the left, any text or other elements following it will flow around it to the right. And if you float an element to the right, any text or other elements following it will flow around it to the left. So your having the <i style="float:right">15</i> last makes it float to the left of your first element floating right. So you have to swap the order of the right floating elements,which can be a bit confusing but that's just how it works.

Ok yeah, it is but I guess knowing how it works now should help, and not make me "wtf" and wanna punch something for something so simple not working lol

[Tumbleweed]

Mar 9, 2017 21:10:19 GMT -8 Stinky666 said:

Mar 9, 2017 21:08:54 GMT -8 Tumbleweed said:

If you float an element to the left, any text or other elements following it will flow around it to the right. And if you float an element to the right, any text or other elements following it will flow around it to the left. So your having the <i style="float:right">15</i> last makes it float to the left of your first element floating right. So you have to swap the order of the right floating elements,which can be a bit confusing but that's just how it works.

Ok yeah, it is but I guess knowing how it works now should help, and not make me "wtf" and wanna punch something for something so simple not working lol

I know what you mean. Been there and done that. lol