Skip to content

Instantly share code, notes, and snippets.

@alloy

alloy/info.markdown

Created July 29, 2012 16:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save alloy/3199912 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save alloy/3199912 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
info.markdown

I want to display these 4 player wrapper divs as in a grid. I.e.

---------- ----------
|player 1| |player 2|
---------- ----------
---------- ----------
|player 3| |player 4|
---------- ----------
Raw
players.html
<!DOCTYPE HTML>
<html>
<body>
<div id="top_row">
<div class="player_wrapper">
<form><select></select></form>
<div class="player"><video></video></div>
</div>
<div class="player_wrapper">
<form><select></select></form>
<div class="player"><video></video></div>
</div>
</div>
<div id="bottom_row">
<div class="player_wrapper">
<form><select></select></form>
<div class="player"><video></video></div>
</div>
<div class="player_wrapper">
<form><select></select></form>
<div class="player"><video></video></div>
</div>
</div>
</body>
</html>
@subdigital
Copy link

subdigital commented Jul 29, 2012

I'd give the divs a class of row. They'd have a style like this:

.row {
  width: 100%;
  background-color: #eee;
}

Then I'd have the player wrapper class look like this:

.player_wrapper {
   width:  40%;
   float: left;
   background-color: #ccc;
   padding: 10px;
   margin: 10px;
}

Might have to adjust the padding, to make sure it looks right, but that should do it.

If this isn't what you want, put it up on http://jsfiddle.net and then we can see the result.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment