How to increase spacing between two DIV elements

Hello,

I'm having issues getting adequate spacing between two DIV elements.  I want to put more space between the <div class="yt_holder"> and the <div id="ytvideo2"></div>.  Any ideas on the best way to accomplish this?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.youtubeplaylist.js"></script>

<script type="text/ecmascript">
	
		$(function() {
			$("ul.demo2").ytplaylist({addThumbs:true, autoPlay: false, holderId: 'ytvideo2', allowFullScreen:true});
		});
	
</script>

<style type="text/css">
.demo2 {
float:left;
margin:0;
padding:0;
width:220px;
height:300px;
overflow-x:hidden;
overflow-y:scroll;
}
#ytvideo2 {
    float: left;
	margin-right:10px;
}
.yt_holder {
    background: #f3f3f3;
    padding: 10px;
    float: left;
    border: 1px solid #e3e3e3;
	margin-bottom:15px;
}
ul {
    float: left;
    margin: 0;
    padding: 0;
    width: 220px;
}
ul li {
    list-style-type: none;
    display:block;
    background: #f1f1f1;
    float: left;
    width: 216px;
    margin-bottom: 5px;
	padding:2px;

}
ul li img {
    width: 120px;
    float: left;
    margin-right: 5px;
    border: 1px solid #999;
}
ul li a {
    font-family: georgia;
    text-decoration: none;
    display: block;
    color: #000;
}
.currentvideo {
	background: #ffccff;
}	
</style>
</head>
<body>
	<div id="page">           
    <div class="yt_holder">
        <ul class="demo2">
            <li><a href="http://www.youtube.com/watch?v=8xg3vE8Ie_E">Video 1</a></li>
            <li><a href="http://www.youtube.com/watch?v=Pb-K2tXWK4w">Video 2</a></li>
            <li><a href="http://www.youtube.com/watch?v=Jb2stN7kH28">Video 3</a></li>
			 <li><a href="http://www.youtube.com/watch?v=8xg3vE8Ie_E">Video 4</a></li>
            <li><a href="http://www.youtube.com/watch?v=Pb-K2tXWK4w">Video 5</a></li>
            <li><a href="http://www.youtube.com/watch?v=Jb2stN7kH28">Video 6</a></li>
			 <li><a href="http://www.youtube.com/watch?v=8xg3vE8Ie_E">Video 7</a></li>
            <li><a href="http://www.youtube.com/watch?v=Pb-K2tXWK4w">Video 8</a></li>
            <li><a href="http://www.youtube.com/watch?v=Jb2stN7kH28">Video 9</a></li>
        </ul>
		<div id="ytvideo2"></div>
    </div>   
    </div>
</body>
</html>

Open in new window

cgray1223Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Sudaraka WijesingheConnect With a Mentor Web Application ProgrammerCommented:
Use margin-left on #ytvideo2
#ytvideo2 {
float:left;
margin-right:10px;

margin-left:20px;
}

Open in new window

0
 
wasim117Connect With a Mentor Commented:
increase the padding of .yt_holder. here is 20px

.yt_holder {
background:none repeat scroll 0 0 #F3F3F3;
border:1px solid #E3E3E3;
float:left;
margin-bottom:15px;
padding:20px;
}

Open in new window

0
 
armchangConnect With a Mentor Commented:
Hi,

One way to do this is define another
<div style="width:20px;height:100%;"></div>

Open in new window

tags between the <ul> and the <div id="ytvideo2"> tags and set the float:right; for the ytvideo2. That way, you always have a fixed spacing on the center between the links and the video.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.