body { float: left; margin: 0; padding: 0; width: 100%; } .macwrapper { width: 100%; /* whatever width you want */ display: inline-block; position: relative; } .macwrapper:after { padding-top: 75%; /* 16:9 ratio */ display: block; content: ''; } .macmain { position: absolute; top: 0; bottom: 0; right: 0; left: 0; /* fill parent */ background-color: #7e9db1; /* let's see it! */ color: white; } .macouter { width: 60%; height: auto; margin: 2% auto 0; } .macinner { width: 100%; display: inline-block; position: relative; background-color: #baac87; border-top-left-radius: 5%; border-top-right-radius: 5%; } .macinner:after { padding-top: 120%; display: block; content: ''; } .macworkspace { position: absolute; top: 0; bottom: 12%; right: 0; left: 0; /* fill parent */ background-color: #d4c7a4; /* let's see it! */ color: white; border-radius: 5%; } .macindent { background-color: #b9ac8a; width: 85%; margin: 5% auto 0; position: relative; border-radius: 4%; padding-top: 70% } .macscreen { position: absolute; top: 3%; left: 3%; bottom: 3%; right: 3%; background-color: #323232; border-radius: 4%; } .macfloppydrive { background-color: #000555; width: 50%; position: relative; left: 42%; margin-top: 15%; } .macfloppydrivelight { float: right; width: 50%; background-color: #baab8a; padding: 2%; border-radius: 5px; } .macfloppydrivedark { position: relative; margin: 0 auto; background-color: #a3947d; width: 90%; padding-top: 30%; border-radius: 3px; } .macfloppytray { position: absolute; background-color: #333333; width: 95.5%; padding-top: 5%; margin-top: 7%; } .macpowerlight { position: absolute; margin: 22% 0 0 10%; border: 2px solid #333333; background-color: #336B33; width: 4%; padding-top: 3%; border-radius: 2px; } .macpowerswitch { position: absolute; top: 91%; left: 65.5%; z-index: 2; width: 25%; border: 1.5px solid #333333; border-radius: 2px; } .macbutton { float: right; width: 20%; padding: 10%; margin: 1px; background-color: #333333; border-radius: 2px; }