Divs wont stack but overlap instead

Question

I need the right-column1 to move under the left when the screen runs out of room for both to sit side by side. Ive tried different overflows and setting media queries to 100% for left and right columns when the browser/device cant fit both side by side but to no avail. The right column just overlaps the left and doesnt want to budge. Most examples like this used to work without any issue a few weeks ago i think maybe ive changed something not sure.

I have the same setup with left containing an image and right containing a link but isnt working either.

Am i missing someting in my code?

<div class="container1">

<div class="left-column1">

<p class="title">More Wallpapers</p>
<div id="wn">
    <div id="lyr1">
        <div id="inner1">

        </div>

    </div>
</div>  <!-- end wn div --></div>

<div class="right-column1"><div class="fb-facepile" data-href="https://www.facebook.com/Techagesite.Free.Mobile.Wallpapers" data-action="like" data-width="200" data-height="64" data-max-rows="2" data-colorscheme="dark" data-size="medium" data-show-count="true"></div></div>

</div>  



.container1 {
width: 100%;

}
.left-column1 {
width: 50%;
float:left;
}
.right-column1 {
width:50%;
float:left;
}

Answer 1

removing width: 50%; from .left-column1 will fix the porblem

Answer 2

This is because your image get bigger that your div. Just add max-width to it & it will work fine.

.left-column1 img{
    max-width: 100%;
}

DEMO

Answer 3

I was able to make it stack using media queries.

@media (max-width: 768px) {
.left-column1 {
    width:100%;
}
.right-column1 {
    width:100%;
}
}

http://jsfiddle.net/J5Q4u/

Does something like this work for you?

Answer 4

Give the image a max-width and an auto height. http://jsfiddle.net/439UX/6/

.container1 {
  width: 100%;
}
.left-column1 {
  width: 50%;
  float:left;
}
.right-column1 {
  width:50%;
  float:left;
}
.left-column1 img { 
  max-width:100%; height:auto; 
}

Adding a media query avoids awkwardly small text columns:

@media (max-width: 300px) {
.container1 > div { width:100%; }
}