- FOREGROUND */ main { padding: 20px; color: #fff; background: rgba(0,0,0,0.5); } p.login { font-family: Arial; font-size: 16pt; font-weight: bold; color: #4C1C10; } left, right { float: left; width: 20%; /* The width is 20%, by default */ } div.relative { position: relative; width: 800px; height: 450px; --border: 3px solid green; } div.absolute { position: absolute; right: 100; width: 500px; height: 440px; --border: 3px solid red; } /* Use a media query to add a breakpoint at 800px: */ @media screen and (max-width: 800px) { left, main, right { width: 100%; /* The width is 100%, when the viewport is 800px or smaller */ } }