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]
