Positioning widgets on sidebar

• 

  1travis · Member · Aug 19, 2013 at 9:56 pm

  • Copy link
  • Add topic to favorites

  Howdy,

  I’ve been at this for awhile now and can’t seem to figure it out. Any way to position sidebar widgets so that they are uniform (or close to it) across post pages (.single) as well as across browsers. (opposed to them moving up and down)

  Ideally, have the 3 widgets ( one on top) at the bottom of the sidebar (specifically, the last (music player) aligned with the share media buttons).

  If you could point me in some sort of direction that’d be great. Doesn’t have to be exact, i can hopefully figure it out from there.

  Here’s a link to the specific page (opens in new window)

  specific page

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

• 

  1travis · Member · Aug 19, 2013 at 9:58 pm

  • Copy link

  Sorry, this one hopefully does.

  Specific Page

• 

  thesacredpath · Member · Aug 22, 2013 at 9:38 pm

  • Copy link

  Hi, I’ve done, what I think you want, on Bold News on my test blog at http://flippintestblog.com and you can take a look at it. It may be that some of your existing CSS will interfere, so you may have to delete some of it, but give the following a try. The top widget on my test blog, I left as is (no positioning). The second widget (categories) I set absolute with a top of 50% and the bottom widget, (meta) I set as absolute with a bottom of 0. I set #content as position relative so that the widgets would position in relationship to that parent element. In the code below, I have specifically targeted single post pages (single body class), but on my test site, it applies to any page that shows widgets.

  .single .col-full {
      position: relative;
  }
  
  .single #categories-5 {
      position: absolute;
      top: 50%
  }
  
  .single #meta-2 {
      position: absolute;
      bottom: 0;
  }

  You can play with the alignment of the center widget, but there isn’t anyway to have it positioned relative to a place in the post itself since posts can vary in length.

• 

  thesacredpath · Member · Aug 22, 2013 at 9:42 pm

  • Copy link

  Oops, one other bit as going position absolute makes the repositioned widget width go to infinity on the right – or the browser window limit. :)

  .widget {
  width: 30%;
  }