Technology Solved

Just another Junction30 Sites site

  • Blogging
  • Gadgets and gizmos
  • Social media.
  • Tweetable definitions.
  • FAQs
  • Privacy and disclosure policies.
  • Home
  • Visiting the blog doctor
  • Privacy and disclosure policies.

CSS Tip: Absolute Positioning Inside Relative Positioning

23rd May 2013 By colneis Leave a Comment

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:

author-box-1

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:

author-box-2

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!

Filed Under: Uncategorized

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • Genesis Widgetised Home Page
  • Woocommerce – Managing A Product’s Stock
  • How to make twitter help your blog soar.
  • Make sure Jetpack G+ publicize settings work for you.
  • How to choose a host for your shiny new wordpress website.

Recent Comments

  • Pornhub Download on More on G+ – authorship on self hosted wordpress including multi author sites.
  • Jax Blunt on Make sure Jetpack G+ publicize settings work for you.
  • Mohd Arif on Make sure Jetpack G+ publicize settings work for you.
  • Jo Sandelson on Make sure Jetpack G+ publicize settings work for you.
  • Stephan Lechner on Make sure Jetpack G+ publicize settings work for you.

Archives

  • July 2019
  • April 2015
  • April 2014
  • November 2013
  • September 2013
  • June 2013
  • May 2013
  • April 2013
  • February 2013
  • December 2012
  • November 2012
  • May 2012
  • February 2012

Categories

  • Blogging
  • Business hints and tips
  • Newsflash
  • Social media.
  • Uncategorised
  • Uncategorized

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Copyright © 2021 · Log in