0

I'm trying to do some text displaying, but sometimes there are many items to display. The problem is that for each item, I have to display a sprite (= just a portion of a big picture).

The code which displays the sprite looks like:

<span style="display:block; 
    width:48px;
    height:48px;
    background: url('/lol/img/sprite/item1.png') -96px -384px no-repeat;"
>&nbsp;</span>

The problem I'm facing, is for big screens: when the text is too short, the next "item" goes "into" the previous, like this (watch it on a 1920px wide screen: http://www.wogwog.fr/champions/amumu/)

How should I do to make it always appear like "one picture+description on the right", one line by one line (just resize your browser to a smaller width to see a "proper" display)?

Sorry I'm not very good in CSS & in english...

Olivier Pons
  • 15,363
  • 26
  • 117
  • 213
  • 1
    Add `clear:left`. When learning about something (in this case, `float`), learn ALL of it, not just the first thing that comes to you, then you might be able to use it properly. – Niet the Dark Absol Dec 29 '14 at 17:20

1 Answers1

0

I think that the problem which you mention is solvable by using clearfix on div which encloses this span. This will prevent any other floating element placed after clearfixed one to collide with it.

Clearfix simply pushes invisible table element right after container. 

.container:after {
  content:"";
  display:table;
  clear:both;
}
Community
  • 1
  • 1
honza-kasik
  • 292
  • 1
  • 9