Three icons next to each other in a row in bio

[vanerose995]

I am trying to add social media links with images in my bio. I was able to write the code and test it on an html tester. This is what is should look like


But when I put the code on Chaturbate, the icons are on a column instead,



Here is my code:
<div style="width: 600px; margin: auto;"> <div style="float: left; width: 181px; padding: 1px;"> <a href="https://chaturbate.com/external_link/?url=https%3A%2F%2Fonlyfans.com%2Fvanerosefree" style=”display:block;width:181px;height:181px;border-bottom:1px solid #000;cursor:pointer;” target="_blank"><img src="https://i.imgur.com/l6Ku6Yd.jpg" title="Onlyfans" style=”width:181px;height:181px;background-color:#756a47″/></a> </div> <div style="float: left; width: 181px; padding: 1px;"> <a href="https://chaturbate.com/external_link/?url=https%3A%2F%2Finstagram.com%2Fvanessarose_of" style=”display:block;width:181px;height:181px;border-bottom:1px solid #000;cursor:pointer;”target="_blank"><img src="https://i.imgur.com/OKYbXYX.jpg" title="Instagram" style=”width:181px;height:181px;background-color:#756a47″ /></a> </div> <div style="float: left; width: 181px; padding: 1px;"> <a href="https://chaturbate.com/external_link/?url=https%3A%2F%2Ftwitter.com%2Fvaneroseof" style=”display:block;width:181px;height:181px;border-bottom:1px solid #000;cursor:pointer;” target="_blank"><img src="https://i.imgur.com/m4qF6vl.jpg" title="Twitter" style=”width:181px;height:181px;background-color:#756a47″ /></a> </div> </div> <div style = " clear: both; display: table; width: 600px; margin: auto;"> <img src="https://i.imgur.com/wwBuT9P.jpg" width="550" height="800" /></div>

Is there something I'm doing wrong? Thanks!

 

[Dan N]

If you're trying to use that on Chaturbate, will not work.
here's the list of HTML tags accepted by Chaturbate platform


Here's a basic markup code which renders 3 links width fluid size positioned in-line (row)

<li style="display:block;width:100%;height:auto;margin:0 auto;text-align:center;padding:.3em 0em .3em;box-sizing:border-box;list-style:none;float:none;clear:left;background-color:green;"><a href="#" style="display:block;width:33.33%;height:auto;margin:0;float:left;background-color:#222;text-align:center;text-decoration:none;">1</a><a href="#" style="display:block;width:33.33%;height:auto;margin:0;float:left;background-color:#444;text-align:center;text-decoration:none;">2</a><a href="#" style="display:block;width:33.33%;height:auto;margin:0;float:left;background-color:#777;text-align:center;text-decoration:none;">3</a><p style="display:block;width:100%;height:0px;overflow:hidden;opacity:0;float:none;clear:left;">clearfloat</p></li>

<li - is the parent element
<a - are the block elements inside (images can be added) / use of float:left css
<p - is there to fix the floating issue not to brake the parent element


Anyway, you can test the above markup code on your fav HTML tester or simply paste it in Markup Code Box (click the Show button)

with a similar approach you can use display:inline-block; instead of block and also remove the float

<li style="display:block;width:100%;height:auto;margin:0 auto;text-align:center;padding:.3em 0em .3em;box-sizing:border-box;list-style:none;float:none;clear:left;background-color:green;"><a href="#" style="display:inline-block;width:33.33%;height:auto;margin:0;background-color:#222;text-align:center;text-decoration:none;">1</a><a href="#" style="display:inline-block;width:33.33%;height:auto;margin:0;background-color:#444;text-align:center;text-decoration:none;">2</a><a href="#" style="display:inline-block;width:33.33%;height:auto;margin:0;background-color:#777;text-align:center;text-decoration:none;">3</a></li>

Well...good luck and let me know how the final outcome looks like.