Currently working on a project where I need to create a simple layout of four boxes. The challenge is that no containers or placeholders are allowed, and only four <span> elements should be in the <body>. In addition, all CSS styling must be written inline. When the browser window is maximized, the layout should be centered with Box 1 at the top and Box 4 at the bottom. Boxes 2 and 3 should sit next to each other between them. So far, I have successfully implemented Box 1 and 4, but I'm facing some difficulties with Boxes 2 and 3. I tried using float:left, but it didn't work as expected when combined with margin:auto.
Another requirement I'm struggling with is having only Box 4 visible when the browser is resized to its smallest size. Despite checking various resources and books, I haven't found a solution yet. It's important to note that we're not allowed to use JavaScript or similar technologies for this task.
Any advice or guidance would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS-exercise</title>
</head>
<body >
<span style="background-color:#ccffe5; width:800px; height:200px; display:block; margin:auto;">Box 1</span>
<span style="background-color:#cce0ff; width:750px; height:500px;">Box 2</span>
<span style="background-color:#ffccdd; width:50px; height:500px;">Box 3</span>
<span style="background-color:#ffcc99; width:800px; height:400px; display:block; margin:auto;">Box 4</span>
</body>
</html>