Question : Want to create 3 separte div ids

Hi,

I want to be able to put 3 separate divs just below my video on this page http://haughtons.actionit.ie/one.html

The reason i am putting them there is because i aim to have circular images rotating in each of the divs

the dive ideally will be about 235 x 219 attached is the html code thank you

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:

           
           
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="jquery.corner.js"></script> 
<title>Haughton Exhibitions</title> 
<style type="text/css"> 
<!--
.container {
	height: 800px;
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
	background-color: #D2D3D5;
	background-image: url(test.jpg);
}
.menu {
	height: 30px;
	width: 870px;
	padding-top: 10px;
	padding-left: 60px;
	font-size: 24px;
}
.content {
	width: 625px;
	height:545px;
	float: left;
	padding-left:60px;
}
.content2 {
	width:440px;
	height:750px;
	float: right;
	
 
}
body {
	background-color: #D2D3D5;
}
.container .content2 table {
	text-align: right;
}
.containright {
	right: auto;
}
tr th {
	text-align: right;
}
body,td,th {
	color: #090;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}
#container2  {
width: 660px;
   height: 400px;
   margin: 0px auto;
   
   padding: 10px;
   background-color: #6DA740;
}  
#container1  {
width: 620px;
   height: 360px;
   margin: 0px auto;
   margin-bottom: -120px;
   padding: 20px;
   background-color: #2A5F00;
} 
}
.right1 {
	text-align: right;
}
a.contact_button { width: 104px; height: 31px;display:block; font-size: 0; text-indent: -9999px; overflow: hidden; background: url(Contact2.gif) top left no-repeat }
a.contact_button:hover {
	background-position: right center
}
a.contact_button:active { background-position: bottom center }
a.contact_button { width: 104px; height: 31px;display:block; font-size: 0; text-indent: -9999px; overflow: hidden; background: url(home.gif) top left no-repeat }
a.contact_button:hover { background-position: left center }
a.contact_button:active { background-position: bottom center }
	
 
-->
</style> 
<script type="text/javascript"> 
       $(function(){
           $('#container1').corner("cc:#6DA740 round 32px");
		   $('#container2').corner("cc:#fff round 32px");
       });
</script> 
</head> 
 
<body> 
 
 
<div class="container"> 
  
  <div class="menu">HAUGHTON EXHIBITIONS LTD</div> 
<div class="content"> 
<div id="container2">
<div id="container1"> 
<a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div> 
	<script type="text/javascript" src="swfobject.js"></script> 
	<script type="text/javascript"> 
		var s1 = new SWFObject("imagerotator.swf","rotator","620","360","1");
		s1.addParam("allowfullscreen","true");
		s1.addVariable("file","madrid.xml");
		s1.addVariable("width","620");
		s1.addVariable("height","360");
		s1.write("container1");
	</script>
</div>
</div>
<div class="content2">
<div class="content2">
<a href="http://haughtons.actionit.ie/includes/contact.html" class="contact_button"></a>
<br/>
<a href="http://haughtons.actionit.ie/includes/contact.html" class="contact_button"></a>
<br/>
<a href="http://haughtons.actionit.ie/includes/contact.html" class="contact_button"></a>
<br/>
<a href="http://haughtons.actionit.ie/includes/contact.html" class="contact_button"></a>
<br/>
<a href="http://haughtons.actionit.ie/includes/contact.html" class="contact_button"></a>
<br/>
<a href="http://haughtons.actionit.ie/includes/contact.html" class="contact_button"></a>

</div>
</div> 
 
</div> 
</body> 
</html>

           
         

Answer : Want to create 3 separte div ids

You didnt add it all...

This needs to go in the style section:
#extraDivContainer {
background: #0f0;
position:absolute;
top:600px;
left:100px;
height:160px;
width:660px;
}
.extraDiv {
background: #00f;
height:140px;
width:200px;
margin:10px;
float:left;
}

And this need to go directly below <div class="container">:

<div id="extraDivContainer">
            <div class="extraDiv"></div>
            <div class="extraDiv"></div>
            <div class="extraDiv"></div>
</div>

Easynow