HTML/CSS "tiles"

Question

Tiles is what I call them but... look at how the maps are organized in this site for the game "osu!" https://osusql.com ... how would I achieve a similar formatting outcome. For one... getting map tiles at all is troublesome. i only make the margin-right to 1689 pixels which gives me a box-look... but it is also a problem when trying to float: right. Can I have some insight onto the situation?

Answer 1

They probably use 'float' property on <titles> containers, with an effet ;hover on the border-radius size of the image child...
Something like ( not workin example, just for principle ):

<div class="tile">
<img src"...">
<ul>
<li>map</li>
<li>stars</li>
<li>...</li>
<li>bpm</li>
</ul>
<a>map link</a>
<h3>Map Number: x</h3>
</div>

#tile { float:left; }
#tile:hover img { border-radius:80%; }

Anyway, there is other ways to do similar layout: using display <table> family properties, using Flex, even using classic box model, avoiding the 'float' (to be reserved to special case ) for benefits of display handling ( with values 'inline', 'inline-block' ), eventually with the positionement mode ( but equally to prefer use with parsimony, case by case )...

Answer 2

Try using display:inline-block ( whatever element ), with setting fixed width ( relative units works, but are less easy to handle than absolute ^^ ) for your container... this would be enough if your tiles have less or mor same height... else you can try play with "float:left;". But auto-tiling is complex to obtain without few deception: notice that on the site that you mentionned, they have try to not have more than one line in each section except two for the first, and that the mobile version don't well work ;)

Answer 3

I should mention looking at the link while on mobile isnt a good idea. It is buggy.

Answer 4

@visph Thanks, however I checked the elements and they use <p> tags. My issue lies in actually creating an html element that doesnt take up the entire width of the screen. i used margin-right 1689px but ofc thats incorrect, I dont think it allows another element to float to the right of it. Thanks for your help, though.