Code example:

body { margin: 0px auto; width: 100%; max-width: 1000px; } #main { float: left; width: 100%; max-width: 1000px; background-image: url(main.png); background-repeat: no-repeat; background-size: 100% 100%; } #top { float: left; width: 100%; max-width: 1000px; min-height: 64px; background-image: url(top.png); background-repeat: no-repeat; } #logo { width: 304px; height: 170px; margin-top: 35px; margin-left: 25px; } /* Add a black background color to the top navigation */ .menu { overflow: hidden; } /* Style the links inside the navigation bar */ .menu a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 12px; text-decoration: none; font-size: 17px; } /* Change the color of links on hover */ .menu a:hover { background-color: #ddd; color: black; } /* Add an active class to highlight the current page */ .menu a.active { color: #4CAF50; } #divtext { width: 1000px; max-width: 1000px; margin-top: 50px; margin-bottom: 50px; } .yt-container { width: 640px; height: 360px; position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; } .yt-container iframe, .yt-container object, .yt-container embed { position:absolute; top:0; left:0; width:100%; height:100%; } #box { float: left; width: 100%; max-width: 1000px; margin-top: 50px; margin-left: 0px; background-color: #fff; } .products { float: left; width: 50%; min-width: 336px; max-width: 336px; min-height: 150px; margin-top: 25px; margin-left: 80px; margin-bottom: 0px; } /* Clear floats after the columns */ .product:after { content: ""; display: table; clear: both; } .vertical-menu { width: 336px; /* Set a width if you like */ } .vertical-menu a { background-color: #eee; /* Grey background color */ color: black; /* Black text color */ display: block; /* Make the links appear below each other */ padding: 12px; /* Add some padding */ text-decoration: none; /* Remove underline from links */ } .vertical-menu a:hover { background-color: #ccc; /* Dark grey background on mouse-over */ } .vertical-menu a.active { background-color: #4CAF50; /* Add a green color to the "active/current" link */ color: white; } #bottom { float: left; width: 100%; max-width: 1000px; min-height: 59px; background-image: url(bottom.png); background-repeat: no-repeat; clear: left; } #power { float: left; width: 100%; max-width: 960px; height: 48px; } p { margin: 0; padding: 0; text-indent: 0; text-align: center; font: bold 20px/20px Myriad Pro; text-transform: none; text-decoration: none; color: #000; letter-spacing: 0.1em; } a { text-transform: none; text-decoration: none; color: inherit; } a:hover { text-transform: lowercase; text-decoration: underline; color: #0066FF; } .text-style-1 { margin-top: 15px; padding: 0; text-indent: 0; text-align: center; font: 16px/8px Verdana; font-weight: bold; text-transform: uppercase; text-decoration: none; color: #4CAF50; letter-spacing: 0.1em; word-spacing: -5px; } .text-style-2 { margin-top: 10px; padding: 0; text-indent: 0; text-align: left; font: 9px/8px Verdana; font-weight: normal; text-transform: uppercase; text-decoration: none; color: #000; letter-spacing: 0.1em; word-spacing: -1px; } .text-style-3 { margin: 10px; padding: 0; text-indent: 0; text-align: right; font: 9px/8px Verdana; font-weight: normal; text-transform: uppercase; text-decoration: none; color: #000; letter-spacing: 0.1em; word-spacing: -1px; } .text-style-4 { margin-top: 30px; padding: 0; text-indent: 0; text-align: center; font: 9px/8px Verdana; font-weight: normal; text-transform: uppercase; text-decoration: none; color: #fff; letter-spacing: 0.1em; word-spacing: 2px; }