Overlapping content when resizing the browser window - html

Question

This is my first time posting to the forum and I'm by no means a web developer but I have been learning as I go.
The problem I'm having with is http://www.audiofactory.co.uk.
On some pages there are music players. Created using a Wordpress plugin.
See pages below for examples.
-services/audio-books/
-services/voiceovers/
-services/voicereels/
-/services/radiocontent/
-/our-team/voice-talent/
I have edited some CSS styles for each player to give it a specific width for a given page.
/* ===== "voicetalent" ===== */
.voicetalent div.playlist-colour { position:absolute; height:115px }
.voicetalent div.playlist-wrap-MI ul { position:static; height:115px }
/* ===== "voicereels" ===== */
.voicereels div.playlist-colour { position:absolute; height:207px }
.voicereels div.playlist-wrap-MI ul { position:static; height:207px }
/* ===== "audiobooks" ===== */
.audiobooks div.playlist-colour { position:absolute; height:251px }
.audiobooks div.playlist-wrap-MI ul { position:static; height:251px }
If you take a look at http://www.audiofactory.co.uk/services/audio-books/
you can see that when you resize the browser window the player does not resize as you would expect and overlaps the image on the left. I'd like the player to auto adjust its width when changing the width of the browser so everything stays relative.
I have spoken to the developer of the music player plugin and he suggested this
It looks like it's just a markup issue, it would probably work if you float the player as well as the image, either using the 'pos' parameter in the shortcode or by wrapping the shortcode in another floated div of a given width.
As the instructions were not very specific I was a bit unsure of how to implement these suggestions.
I tried wrapping my short code in a <div> like so but its probably completely wrong.
/* ===== "audiobooks" ===== */
<div position:float;>
.audiobooks div.playlist-colour { position:absolute; height:251px }
.audiobooks div.playlist-wrap-MI ul { position:static; height:251px }
</div>
Any help you could offer would be really appreciated.

Answer 1

Floating would be easiest. You'll have to add a clearfix for this to work properly so you can force the floated elements to behave as desired when they stack.
First include this into your main style sheet at a top level (top of the file).
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
In the html for the audiobook you'll have to add the clearfix class as below.
<div id="wrapperMI_0" class="clearfix wrap-MI audiobooks nolistbutton nopn">
On the div.wrap-MI class in css add:
float: left;
width: 48%;