Friends List Mini Profile us acting funny

[bai]

Hello, all! I am having a problem with the mini profiles in the friends list that I just noticed today; the profiles would display one below the other which would make for an extremely long page if I had the nerve to have more than two friends, so I tried some "float: left;" style and un-ordered lists. With that in the code, this is what happens:




Overlapping that is ugly as sin. I would like for them to have a little space between them. I haven't tried any margin coding yet, just a simple <br> or &nbsp, but no luck. I don't even want to know what this code will look like when I have more friends + some are online and offline. 

Here is my code at present:

<div class="offline-friends clear">
<ul style="list-style-type:none; display: inline-block;">{foreach $[offline_friend]}
   <li style="float: left;">$[offline_friend.miniprofile]<br></li>
       {/foreach}</ul>
</div>

I even placed the UL Style code in between the foreach statements and the same deal happened. When I searched on Google I saw a few posters say try the inline-block stuff.

[Brian]

Margins are the ideal solution here. If you want to ensure that everything is uniform (up until the combined width of your mini-profiles meets your forum width anyways) I recommend adding a right, left, and bottom margin. The bottom margin should be double the size of the left and right margins so that the spacing is the same.

Example:

margin: 0 2px 4px;

/*
This is equivalent to
    margin-top: 0px;
    margin-right: 2px;
    margin-bottom: 4px;
    margin-left: 2px;
*/

Realistically you should never rely on the HTML to style an element. The CSS should be doing all of the styling work to make the page clean and beautified. The only job of the HTML is to determine where things go on the page and how they're identified, not how they look.

For example, you can use HTML to center text within an element but that should really be the job of your CSS. In the case of this thread you should be using margins to space out your mini-profiles rather than text elements.