Hi Dave Check to ensure your total percentage of DIV widths and margins do not exceed 100%
Cheers, Mick On 21 September 2010 22:30, Ryan Randles <[email protected]> wrote: > 960grid.com > > Sent from my iPhone > > > On Sep 21, 2010, at 3:46 PM, Dave <[email protected]> wrote: > > 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] >> > > -- > -- > 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] > -- -- 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]
