3 rows of videos..

[leehughes]

Hi,

I need to create 3 rows of columns for my videos.

I have the page all set up, am going to delete the right column to allow more room.
http://www.leehughes.co.uk/Video/index.html

I would like them in a row of three centered in the page and any other videos that i add will just join them in the following place.

I have had a play but my lack of css knowledge shines through

.video{
width:400px;
height:300px;
margin:0px;
display:inline;/* ie6 fix */

}

[Andyram2k]

Hi leehughes,
You could use tables for your layout, and the rows would be even throughout, if you have large video titles. If you did it using DIVs (Which i would personally), this is a quick example of how you could do so:

<style>

#videoContainer {
	width: 1000px;
	margin: 0px auto;
}
.video {
	float: left;
	width: 328px; 
	height: 300px;
	display: block;
	margin-right: 5px;
}

</style>

<div id="videoContainer">

	<div class="video">
	  <object width="400" height="300">
	  <param name="allowfullscreen" value="true" />
	  <param name="allowscriptaccess" value="always" />
	  <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" />
	  <embed src="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="320" height="240"></embed>
	  </object>
	</div>

	<div class="video">
	  <object width="400" height="300">
	  <param name="allowfullscreen" value="true" />
	  <param name="allowscriptaccess" value="always" />
	  <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" />
	  <embed src="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="320" height="240"></embed>
	  </object>
	</div>
	
	<div class="video">
	  <object width="400" height="300">
	  <param name="allowfullscreen" value="true" />
	  <param name="allowscriptaccess" value="always" />
	  <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" />
	  <embed src="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="320" height="240"></embed>
	  </object>
	</div>
	
	<div class="video">
	  <object width="400" height="300">
	  <param name="allowfullscreen" value="true" />
	  <param name="allowscriptaccess" value="always" />
	  <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" />
	  <embed src="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="320" height="240"></embed>
	  </object>
	</div>
	
	<div class="video">
	  <object width="400" height="300">
	  <param name="allowfullscreen" value="true" />
	  <param name="allowscriptaccess" value="always" />
	  <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" />
	  <embed src="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="320" height="240"></embed>
	  </object>
	</div>
	
	<div class="video">
	  <object width="400" height="300">
	  <param name="allowfullscreen" value="true" />
	  <param name="allowscriptaccess" value="always" />
	  <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" />
	  <embed src="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="320" height="240"></embed>
	  </object>
	</div>
	
	<div class="video">
	  <object width="400" height="300">
	  <param name="allowfullscreen" value="true" />
	  <param name="allowscriptaccess" value="always" />
	  <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" />
	  <embed src="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="320" height="240"></embed>
	  </object>
	</div>
	
	<div class="video">
	  <object width="400" height="300">
	  <param name="allowfullscreen" value="true" />
	  <param name="allowscriptaccess" value="always" />
	  <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" />
	  <embed src="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="320" height="240"></embed>
	  </object>
	</div>
	
	<div class="video">
	  <object width="400" height="300">
	  <param name="allowfullscreen" value="true" />
	  <param name="allowscriptaccess" value="always" />
	  <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" />
	  <embed src="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="328" height="246"></embed>
	  </object>
	</div>

</div>

Hope this helps in some way

[leehughes]

Thanks Andy,

Everything is working great now however, I can't seem to add any padding around the video. The videos are pretty tight so I added a 5px padding around them. This padding caused the third vid to disappear and the padding didn't even appear on the first two vids..

http://www.leehughes.co.uk/Video/index.html

[Andyram2k]

That was literally a 2 minute example i created, you'll have to modify the styles to accommodate. To add 5px either side, just minus 10 away from the width to allow for this.

I work with px based layouts mostly so this is how i would do this, but please feel free to change to % widths if thats what you're used to. Hope this helps

[leehughes]

thanks andy