Hi guys, firstly this is a HTML & CSS question..... I have implemented a simple accordion using jquery which I got from this site: http://www.madeincima.eu/blog/jquery...asy-accordion/

I am not advertising the site above, but i thought if someone wants to look at the original code to help solve my problem this was the best way to do it.

I have tried sending a message to the site owner however haven't had a response. I have implemented it on a test page for now which can be viewed here: http://www.chrisjacksonphoto.co.uk/weddingupdate.html

If you click on the 'Ceremony & formals' tab you will see a selection of images which are all display vertically and tiling down rather than displaying on the same line and scrolling horizontally WITHIN that particular slide.

I have tried putting a div inside the < dd > tags but it doesn't work.

I have a successful horizontal scrolling div using a div and the overflow auto code, on the wedding.html page of my site and this is the div i tried copying into my slide but it just causes a vertical scroll.

Here is the code relating to the accordion:

head:

Code:
      <!-- Scripts -->
      <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.easyAccordion.js"></script>
      <script type="text/javascript" src="utility.js"></script>
      
      <style type="text/css">

		 
		/* UNLESS YOU KNOW WHAT YOU'RE DOING, DO NOT CHANGE THE FOLLOWING RULES */
		
		.easy-accordion{display:block;position:relative; padding:0;margin:0}
		.easy-accordion dt,.easy-accordion dd{margin:0;padding:0}
		.easy-accordion dt,.easy-accordion dd{position:absolute}
		.easy-accordion dt{margin-bottom:0;margin-left:0;z-index:5;/* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px;  /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);cursor:pointer;}
		.easy-accordion dd{z-index:1;opacity:0}
		.easy-accordion dd.active{opacity:1;}
		.easy-accordion dd.no-more-active{z-index:2;opacity:1}
		.easy-accordion dd.active{z-index:3}
		.easy-accordion dd.plus{z-index:4}
		.easy-accordion .slide-number{position:absolute;bottom:0;left:10px;font-weight:normal;font-size:1.1em;/* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg);  /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
		 
		 
		/* FEEL FREE TO CUSTOMIZE THE FOLLOWING RULES */
		
		dd p{line-height:120%}
			
		#accordion-2{width:1010px;height:540px;padding:5px; background:#fff}
		#accordion-2 h2{font-size:2.5em;margin-top:5px}
		#accordion-2 dl{width:1010px;height:540px; background:#fff}	
		#accordion-2 dt{height:32px;line-height:32px;text-align:right;padding:2px 5px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff; color:#26526c}
		#accordion-2 dt.active{cursor:pointer;color:#68889b; background:#fff}
		#accordion-2 dt.hover{color:#0071ca;}
		#accordion-2 dt.active.hover{color:#0071ca}
		#accordion-2 dd{padding:25px; background:#fff}
		#accordion-2 .slide-number{color:#68889b;left:10px;font-weight:bold}
		#accordion-2 .active .slide-number{color:#fff}
		#accordion-2 a{color:#68889b}
		#accordion-2 dd img{float:right;margin:0 0 0 30px;position:relative;top:-20px}

      </style>

main html:

Code:
 <div id="accordion-2">
            <dl>
                <dt>The Engagement Session</dt>
                <dd><img src="images/mammoths/img1.png" alt="Engagement images here" /></dd>
                <dt>The Preparations</dt>
                <dd><img src="images/mammoths/img2.png" alt="Preparations images here" /></dd>
                <dt>The Ceremony & The Formals</dt>
                <dd>
               
                    <img src="images/weddings/photos/m_crombie/mcromb07.jpg"/>
                    <img src="images/weddings/photos/m_crombie/kathrob006.jpg"/>
                    <img src="images/weddings/photos/m_crombie/kathrob008.jpg"/>
                    <img src="images/weddings/photos/m_crombie/kathrob010.jpg"/>
                    <img src="images/weddings/photos/phil_oldham/mattmaggie009.jpg"/>
                    <img src="images/weddings/photos/phil_oldham/mattmaggie010.jpg"/>
                    <img src="images/weddings/photos/phil_oldham/philchris002.jpg"/>
                    <img src="images/weddings/photos/phil_oldham/philchris005.jpg"/>
                    <img src="images/weddings/photos/mark_caroline_selwood/008.jpg"/>
                    <img src="images/weddings/photos/mark_caroline_selwood/012.jpg"/>
                
                </dd>
                <dt>The Moment between Moment's</dt>
                <dd><img src="images/mammoths/img4.png" alt="formals images here" /></dd>
                <dt>The Reception</dt>
                <dd><img src="images/mammoths/img4.png" alt="reception images here" /></dd>
                <dt>The Albums & Prints</dt>
                <dd><img src="images/mammoths/img4.png" alt="albums and prints images here" /></dd>
                
           </dl>
        </div>

Please help if you can as I need to get this rolled out on all gallery pages within the next few days

Thank you in advance to anybody who contributes