alignin 2 divs garde un descendant verticalement

Question

J'ai des maux de tête en alignant 2 divs. J'ai lu de nombreux didacticiels où deux divs, l'un avec flotteur laissé l'autre à droite, sont utilisés. Voici le code que j'utilise. Le problème est que l'image dans div "fotosder" est en baisse si le navigateur est redimensionné ou si une résolution inférieure est utilisée.

Voici mon code:

<li> 
    <div class="holder_slogan"> 
     <p class="slogan"> slogan </p> 


     <div class="social_buttons2"> 
    <div class="inset"> 
     <a class="fb login_button" href="http://xxx.com/facebook?next=xxx"> 
      <span class="logo_wrapper"><span class="logo"></span></span> 
      <span>Facebook</span> 
     </a> 

    </div> 
    <div class="registrate"> 
    <img src="data/images/registrate.png" alt="registrate" /> 
    </div> 
    </div> 

    </div> 

<div class="fotosder"><img src="images/imagen1.jpg" alt="listad" /></div> 
    <div style="clear:both;"></div></li> 


.sp-slider > li { 
    -moz-box-sizing: border-box; 
    float: left; 
    height: 100%; 
    padding: 0 60px; 
    position: relative; 
    text-align: left; 
    transition: opacity 0.4s ease-in 0.8s; 
    width: 20%; 
    z-index: 2000; 
} 

.holder_slogan { 
    float: left; 
    margin: 66px 0 0 18%; 
    width: 387px; 
} 

#board .slogan, #board2 .slogan { 
    float: left; 
    font-size: 12px; 
    line-height: 25px; 
    margin-right: 30px; 
    padding-right: 10px; 
    padding-top: 6px; 
    text-align: left; 
    width: 470px; 
} 

.social_buttons2 { 
    float: left; 
    margin: 0 auto; 
    width: 220px; 
} 

.fotosder { 
    float: right; 
    margin: 5px 18% 0 0; 
    position: relative; 
    width: 329px; 
} 

.sp-slider > li img { 
    -moz-box-sizing: border-box; 
    display: block; 
    max-height: 100%; 
    max-width: 100%; 
    padding: 10px 0; 
} 

img { 
    border-style: none; 
    vertical-align: top; 
} 

Answer 1

Ce comportement est normal. Lorsque l'élément d'emballage n'est pas assez large pour s'adapter aux deux éléments flottants, l'un ira sous l'autre. Le droit flottait dans ce cas car il est "dernier" dans le flux de documents. Si cela vous inquiète, donnez aux éléments une largeur de% et ils ne doivent pas être réorganisés à moins qu'ils ne deviennent extrêmement petits ou que le contenu des éléments les empêche de rétrécir davantage.