Positioning Icons (via Text Widget) at top of page

• 

  anothernicole · Member · Jan 8, 2013 at 11:42 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I’ve got several social media icons at the top of my blog (anothernicole.com; Suburbia theme), and I’ve done that by putting them into a text widget and positioning the widget at the top of the page. I used this:

  #container {
  	position: relative;
  }
  
  #text-360088270 {
  	position: absolute;
  	top: 78px;
  	right: 200px;
  }

  The problem is, the icons move all over the place depending on computer screen size/width, browser, etc. (So they look fine to me at home, but are WAY off at work, etc.)

  Is there a way to position the icons within the white border that is part of the header/theme? To sort of absolutely say: these icons will always be 17px (for example) from the edge of the white, no matter what the screen width is?

  Please forgive my naivete/inability. I’m really new to CSS, and I’ve basically just been picking up whatever I could on a need basis. Any tips or help anyone has, would be greatly appreciated.

  Thank you!

  Nicole

  The blog I need help with is: (visible only to logged in users)

• 

  anothernicole · Member · Jan 8, 2013 at 11:45 pm

  • Copy link

  ps. I know I’ve asked about this in the past, and I am using the same CSS I used before, which worked in my previous theme… Sorry :(

• 

  designsimply · Member · Jan 15, 2013 at 2:32 pm

  • Copy link

  Try setting the relative positioning on “#wrapper” instead of “#container” and adjusting the numbers a little like this:

  #wrapper {
  	position: relative;
  }
  #text-360088270 {
  	position: absolute;
  	top: 20px;
  	right: 20px;
  }

• 

  anothernicole · Member · Feb 12, 2013 at 5:12 am

  • Copy link

  Ohmygoodness–thank you so much! This has been driving me crazy! (Sorry for my late reply; I didn’t realize this had been answered). So many thanks!!!