I reduced my fork of your former demo a bit further, with the added .textcontainer from your last demo. The way your last demo is trying to achieve this right alignment of the .textcontainer is with absolute positioning. Now this is tricky for the main reason it takes the element out of the “normal flow“. This is what you found out with the overlapping [1]. With floating this .textcontainer to the right, with a value for max-width applied to it, we can achieve the same. Note however that this is not the only way to achieve this: another (and maybe better) way would be using flexbox, but it can’t hurt learning using floats first. Note also I out-commented the so-called clearfix, because with “overflow: hidden” on the direct parent element of the floated element, we don’t need this clearfix here, but it would have achieved the same effect: clearing the floats.
http://codepen.io/atelierbram/pen/OpKXQo
Let us know if this comes closer to what you want.
- Note that an absolute positioned element is always positioned in relation to the first parent element which has
position: relative applied to it.
