CSS Tip: Absolute Positioning Inside Relative Positioning

I was having a little problem with styling a WordPress/Genesis Author Box. The normal layout is that there is an avatar in the top left hand corner around which the text flows- like this:

However, what the client wanted was for the all text to be indented, in a neat column to the right of the image, like this:

Now, my first reaction was that I would need to edit the code which generates the author box, so that the image was wrapped in a block level element, which would then push the text across as required… or something like that. That is a fairly complicated thing to do requiring edits to functions.php and completely disproportionate to what is a pretty minor layout change. I braced myself for the labours ahead.

Then I came across a short article called Absolute Positioning Inside Relative Positioning at CSS Tricks. As the article says – “To some, this is obvious. To others, this may be one of those CSS “Ah-ha!” Moments.” It was for me – I didn’t know you could do that!

The point is as the article says “A page element with relative positioning gives you the control to absolutely position children elements inside of it.”

In my case, restyling the author box took just a couple of minutes and two lines of CSS:

.author-box div {position:relative;margin-left:90px}
.author-box img {position:absolute;left:-90px}


The first line moves all the box contents 90px to the right, the second moves just the image 90px to the left. All done!