Put playlists side by side?

• 

  waxbuckets · Member · Feb 12, 2014 at 11:50 am

  • Copy link
  • Add topic to favorites

  I am using twenty ten. I have the custom design and space upgrades. On my page named “playlists” from the top nav menu, there are 2 playlists. It was one long one but I’m splitting it in two hoping to be able to put them side by side so it doesn’t look so long and take up vertical space. Is there code for this?

  http://www.waxbuckets.com

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

• 

  thesacredpath · Member · Feb 13, 2014 at 4:18 pm

  • Copy link

  I don’t have any audio uploaded to my test site (gotta remedy that) so I can’t test the following, but give it a try and see if it works.

  Add this to your CSS:

  .wp-multiplayer .wpjp-audio {
  max-width: 310px;
  }

  Then open that post, and right now you have the following:

  <p style="text-align:left;">[playlist tracks="464,447,455,462,454,460,445,449,456,453,465,468"][playlist tracks="451,448,463,467,466,457,450,452,459,458"]</p>

  Let’s change that to this instead and see if it puts them side-by-side.

  <div style="width: 310px; float: left;">[playlist tracks="464,447,455,462,454,460,445,449,456,453,465,468"]</div>
  <div style="width: 310px; float: right:">[playlist tracks="451,448,463,467,466,457,450,452,459,458"]</div>

• 

  waxbuckets · Member · Feb 14, 2014 at 1:14 am

  • Copy link

  Hi SacredPath,

  I first put your CSS code in my theme customization area and then tried the HTML code above, took out the <p> affiliations and replaced with your code. All that did was merge the two separate playlists on top of each other vertically in one big box and added two “play” buttons and volume control bars on top of each other at the top of the playlist. I think I’m back to square one…tricky request.

  Got your other reply about wrapping text as well. Thanks for that. It’s a tricky one as well. I tried inserting the playlist (and the code) where I’d want the text to wrap around it but it didn’t listen to me and just broke the line so the text was above and below.

  This code stuff is tricky. Think I’ll keep my day job :)

• 

  designsimply · Member · Mar 1, 2014 at 8:34 pm

  • Copy link

  It is tricky! To display two playlists side by side, you would probably need to float the container elements left and clear the float for only the 2nd one. If you need further help, please link to a page where there are two playlists next to each other.