Left Align Text AND Right Align Image In CSS

I am somewhat new to CSS and I have a problem that I can't seem to solve. I would like to have a series of divs on my page (stacked one on top of the other) and each of them shoul

Solution 1:

Hi i have a solution for you chek this link http://jsfiddle.net/8mQc4/15/.

It's based use some properties like:

float and vertical-align.

This code allows flexible height and width of img, and also his container center vertically de text.Just try with more large texts or images.

Solution 2:

Oh man I got a fun solution for you that may work but none the less is a solid idea!

If you set the image as the background you can avoid floating or positioning.

.section {
   background: url(http://jpowell43.mydevryportfolio.com/flatDesign/images/tab-2.svg) no-repeat rgba(255, 255, 0, 0.4);
   background-position: center right;
   background-size: contain;
   width: 100%;
}

The only thing that I may find to be a problem is the image size is based on the content inside of the div.

JSFIDDLE

This will allow the image to have a fixed size but! it does run into the problem of relying on the text for size over the image. :/

background-size: 80px 60px;

Fixed size

With the use of min-height: whatever; You can still achieve the desired result but not 100% the best.

min-height