Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

Wrapping text with style="float: right" not working in website

A topic by Neon Fridge Games created Aug 12, 2021 Views: 552 Replies: 3
Viewing posts 1 to 3
(2 edits)

We have a problem with our website. So, I have an embed (here represented by the blue rectangle with the fridge logo in it) and I'd like to put it to the right of the text below.

The code of the embed is this:

<iframe loading="lazy" src="[source]"  
style="border:0px #FFFFFF none;float:right" name="browserGame" scrolling="no" frameborder="0"  
marginheight="0px" marginwidth="0px" height="210px" width="310px" allowfullscreen=""></iframe>

As you can see, we tried using float:right as it's literally designed to text wrapping around stuff but it doesn't work for some reason.

Strangely enough, in the preview of the page in the edit settings everything works perfectly fine, as shown in the image below:


Here is the complete HTML (excluding the three links at the top which aren't at fault here), in case it was of some use:

<iframe loading="lazy" src="[source]"  
style="border:0px #FFFFFF none;float:right" name="browserGame" scrolling="no" frameborder="0"  
marginheight="0px" marginwidth="0px" height="210px" width="310px" allowfullscreen=""></iframe> 
<h5 style="color:#dd4a4a"><em>THE COZIEST PLACE FOR THE CRAZIEST GAMES</em></h5> <p>Greetings, 
kind guest, and welcome to our humble pub.<br></p> <p>We're a small development team from Italy 
and we always wish the best experience to our guests, from our other places you can visit to our 
products.</p> <p>You can see more information about our debut game, <span style="color:#dd4a4a">
Carboncino's Inferno</span>, down below.</p>

One final piece of information about this issue is that it seems to be an itch.io problem specifically, as this exact code works perfectly on a local html file. Hence why the tag of this topic is "Bug". What is happening?

Admin(+1)

We have a very restricted set of HTML and CSS that is allowed by default for security reasons. We don’t allow you to inline CSS other than a few simple properties. You may request the CSS editor for your profile though: https://itch.io/docs/creators/css-guide

Hello, thank you for the quick reply! We already requested the CSS editor for our profile and the itch.io staff kindly gave it to us. Still, though, how can we use it to align the text and the embed as we'd like? 

(1 edit)

I did it! For anyone who has a similar problem, when using custom classes in HTML and CSS always remember to use custom- before the name of your class. 

So for me this did the trick:

<div class="custom-embed"><iframe loading="lazy" src="[put your source here]"  
style="border:0px #FFFFFF none;float:right" name="browserGame" scrolling="no" frameborder="0"  marginheight="0px" marginwidth="0px" 
height="210px" width="310px" allowfullscreen=""></iframe></div> 

And then in the custom CSS editor:

.custom-embed{float:right}
This topic has been auto-archived and can no longer be posted in because there haven't been any posts in a while.