<article> misplaced [#1763944]

In some case the article are not placed correctly.
You can reproduce by creating 3 articles A, B and C using a teaser, displayed on the front-page.
You should see :

A B
C

If you increase slightly (eg: using firebug) the text-length of the article A, the height will increase until the bottom-margin (40px) pushes article C away thus the following :

A B
  C

Comments

Comment #1

drzraf CreditAttribution: drzraf commented 4 October 2012 at 11:48

an hypothetical solution would be to use an <hr/> every 2 <articles>
so that 2 articles are on a same "level" and articles of the level below won't wrap.
maybe something more elegant is still possible though.

Comment #2

drzraf CreditAttribution: drzraf commented 4 October 2012 at 12:43

This does the trick (thx to SeriousMatters and others helpful people from #drupal):

.front div.content article:nth-child(even) {                                                                  
  float:right;                                                                                                
  clear:right;                                                                                                
}                                                                                                             
.front div.content article:nth-child(odd) {                                                                   
  float:left;
  clear:left;                                                                                     
}