Horizontal Scolling List

HTML & CSS
1

I’ve got this css from a wordpress YouTube plug-in I’ve turned into a horizontal scrolling list. My one issue, is now the title and date don’t wrap, so it doesn’t look as good as it could. I’ve tried to include all the css and code that make it happen on the page. Also, here is the page link, in case looking at it helps you understand what I mean:

http://theturtleroom.com/educational-resources/ed-videos/


.youtubeFeeder {
	margin: 10px;
	text-align: center;
}

.youtubeFeederplaylist {
	background: #F8F4E8;
	padding: 10px;
	border: 1px solid #38240E;
	margin-bottom: 15px;
}

.youtubeFeederplaylist .youtubeVideo {
	float: left;
	margin-right:10px;
}

.youtubeFeederPlaylistList {
	overflow: auto;
	width: 560px
	height: 100px;
	white-space: nowrap;
	margin: 0 !important;
	padding: 10px !important;
	list-style: none;
}

.youtubeTitle {
	font-weight: bold;
}

.youtubeDateaftertitle {
	font-weight: normal;
}

and here is a sample of the the list source code from the page (only includeded two items, cause its more than enough to get the point across)


<ul class="youtubeFeederPlaylistList" id="youtubeFeederPlaylist1">
<li><a href="http://youtube.com/watch?v=2LEsGc0dVJc&autohide=2&autoplay=0&cc_load_policy=0&color=red&controls=1&disablekb=0&fs=1&iv_load_policy=1&loop=0&modestbranding=1&rel=0&showinfo=0&theme=dark"><img alt="BLANDING'S TURTLE (Emydoidea blandingii)" class="youtubeThumb" src="//i.ytimg.com/vi/2LEsGc0dVJc/default.jpg" /><span class="youtubeTitle">BLANDING&#8217;S TURTLE (Emydoidea blandingii)</span><span class="youtubeDateaftertitle">8/18/12</span></a></li>
<li><a href="http://youtube.com/watch?v=SP6QbLdQBx0&autohide=2&autoplay=0&cc_load_policy=0&color=red&controls=1&disablekb=0&fs=1&iv_load_policy=1&loop=0&modestbranding=1&rel=0&showinfo=0&theme=dark"><img alt="Wood Turtle (Glyptemys insculpta): A Species in Need" class="youtubeThumb" src="//i.ytimg.com/vi/SP6QbLdQBx0/default.jpg" /><span class="youtubeTitle">Wood Turtle (Glyptemys insculpta): A Species in Need</span><span class="youtubeDateaftertitle">7/17/12</span></a></li>
</ul>
2

Looks like I missed some of the css:


.youtubeFeederPlaylistList li {
	list-style-type: none;
	display: inline-block;
	background: #F8F4E8;
	width: 216px;
	height: 100px;
	border: 1px solid #9D7505;
	margin: 0 10px !important;
	padding:3px !important;
	text-align: left !important;
}
3

spent all morning playing with it…got it to do close to what I wanted. This could even be deleted…