Clever Geek Handbook

CSS - Liquid width with background image

I need to have 2 equal width divs side by side, the left column will contain the image and the right column will contain dynamic text, where the height of the text div can vary anywhere between 400px - 550px depending on how much text the owner site has.

I need the image to align at the top and bottom with the edge of the textbox. The container element is flexible to react.

Desired effect

enter image description here

I currently have floats to merge elements together and respond subtly, but the image came out short, like this:

enter image description here

I tried to set the image as background image in the left column with ...

.column-image{
    padding-bottom:100%;
    margin-bottom:-100%;
    background-size:contain;
}

But it's still not enough if I don't pick up the bag. It becomes useless when I resize my browser as the aspect ratio changes.

I am trying to avoid using Javascript to solve this problem.

+3


source to share


1 answer


Use display:table

for container and display:table-cell

inner divs. Also don't forget to deletefloat



Fiddle: http://jsfiddle.net/afelixj/26b3vtfx/2/

+2


source






More articles:


All Articles