<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css" > #wrapper { width:1300px; background-color:red; } .player { width:300px; height:250px; background-color:cornflowerblue; display:inline-block ; margin-left:80px; } </style> <script type="text/javascript" > function close3() { var el3 = document.getElementById("p3"); el3.style.display = "none"; var el2 = document.getElementById("p2"); var el1 = document.getElementById("p1"); el2.onclick = close2; el1.style.marginLeft = "233px"; el2.style.marginLeft = "233px"; } function close2() { var el2 = document.getElementById("p2"); el2.style.display = "none"; var el1 = document.getElementById("p1"); el1.style.marginLeft = "500px"; } </script> </head> <body> <div id="wrapper"> <div id="p1" class="player"></div> <div id="p2" class="player" ></div> <div id="p3" class="player" onclick="close3();"></div> </div> </body> </html>