CSS Issues with Color Sections

I’m trying to align images to the bottom baseline of a div within a color section. I have two 50% columns in the color section (left is text, right is image). As the site is responsive, when I change the window size the image moves up/down the container as it seems to be fixed a to a certain point on the page, and not anchored to the bottom.

Is there a way to fix the baseline of the image to the baseline of the container indefinitely with this theme/css? Essentially, the image is aligned to the bottom to begin with at full width, but as the window contacts, the text forces to container to expand and I end up with white space below the image.

My CSS for the image div is as follows:

.floatbottom {



height: 100%;

position: absolute;

bottom:0;

width: 500px;



}

CSS for parent container (color section):

#box{



height: auto;

padding-top: 90px;

padding-bottom: 90px;

position: relative;



}

HTML for image in container:

<div class="floatbottom">

<img src="/images/bottom.png">

</div>

Is there anything in the CSS for Enfold that might conflict with this code and cause the image not to align to the bottom of a div? Any ideas would be massively appreciated – thanks!