Question

I’m having headaches aligning 2 divs. I’ve read many tutorials where two divs, one with float left the other float right, are used. Here is the code I’m using. The problem is that the image in div “fotosder” is going down if the browser is resized or a lower resolution is used.

Here is my 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

This is normal behaviour. When the wrapping element is not wide enough to fit the two floated elements, one will go under the other. The right floated in this case as it is “last” in the document flow.

If you’re worried about this, give the elements a % width and they shouldn’t re-arrange unless they get extremely small or the contents of the elements prevent them from shrinking further.