• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 453
  • Last Modified:

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

0
cgray1223
Asked:
cgray1223
3 Solutions
 
Sudaraka WijesingheWeb Application ProgrammerCommented:
Use margin-left on #ytvideo2
#ytvideo2 {
float:left;
margin-right:10px;

margin-left:20px;
}

Open in new window

0
 
wasim117Commented:
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
 
armchangCommented:
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

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now