DouweM/info.markdown

## info.markdown

      
    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|
---------- ----------


## player.css
ul.players {
  overflow: hidden;
  list-style: none;
  width: 400px;
}

ul.players li {
  float: left;
  width: 200px;
  height: 200px;
}

## players.html
<!DOCTYPE HTML>
<html>
<body>
  <ul class="players">
    <li class="player_wrapper">
      <form><select></select></form>
      <div class="player"><video></video></div>
    </li>

    <li class="player_wrapper">
      <form><select></select></form>
      <div class="player"><video></video></div>
    </li>

    <li class="player_wrapper">
      <form><select></select></form>
      <div class="player"><video></video></div>
    </li>

    <li class="player_wrapper">
      <form><select></select></form>
      <div class="player"><video></video></div>
    </li>
  </ul>
</body>
</html>
	ul.players {
	overflow: hidden;
	list-style: none;
	width: 400px;
	}

	ul.players li {
	float: left;
	width: 200px;
	height: 200px;
	}
	<!DOCTYPE HTML>
	<html>
	<body>
	<ul class="players">
	<li class="player_wrapper">
	<form><select></select></form>
	<div class="player"><video></video></div>
	</li>

	<li class="player_wrapper">
	<form><select></select></form>
	<div class="player"><video></video></div>
	</li>

	<li class="player_wrapper">
	<form><select></select></form>
	<div class="player"><video></video></div>
	</li>

	<li class="player_wrapper">
	<form><select></select></form>
	<div class="player"><video></video></div>
	</li>
	</ul>
	</body>
	</html>