Hi Brandtley, That helps a bit. I now have four div's one below the other. I can't seem to force them to go into a 2x2 layout.
On Sep 21, 4:44 pm, Brandtley McMinn <[email protected]> wrote: > Hey Dave, > > You were on the right track using <div>'s, but you just need to style > them accordingly. > > XHTML > <div class="videoContainer"> > <div class="videoPlayerContainer"> > ... video code here ... > </div> > > <div class="videoPlayerContainer"> > ... video code here ... > </div> > > ... more videos ... > </div> > > CSS > .videoContainer { > width: 100%; /* full browser width */} > > .videoPlayerContainer { > position: relative; > float: left; > width: 20%; margin: 10%; /* for a 4 column layout */ > width: 30%; margin: 5%; /* for a 3 column layout */ > } > > Using the % signs when defining width and margin creates a "fluid" > layout. Meaning each <div class="videoPlayerContainer"> will be % width > of the parent object <div class="videoContainer">; which is set to the > full browser width. > > Hope this helps, > Brandtley > > -- > Brandtley McMinn - Creative Director > Gigglebox Studios > [email protected] > > On 9/21/2010 8:49 AM, Dave wrote: > > > > > Hi, > > > I want to create a grid layout that will contain a number of quicktime > > plugin windows. Effectively this page would create a sort of video > > wall. > > > I would like to be able to create a grid of 2x2 and 3x3, but in each > > case make the grid use the entire browser window, so that if a user > > has a larger monitor the full space will be used. > > > I've tried a creating a HTML page with 4 divs and then using a style > > sheet to arrange them, but can't seem to get it right. > > It seems like something that should be quite easy, so perhaps I'm > > missing something obvious, could anyone give me an example of how to > > do this? > > > Thanks -- -- You received this because you are subscribed to the "Design the Web with CSS" at Google groups. To post: [email protected] To unsubscribe: [email protected]
