Missing Code

Report a typo

We've learned that if we use float and clear incorrectly, we can get an undesirable result. However, if we use them correctly, these two properties can help us a lot.

This is the case with the code below, someone forgot a part of the code and ended up messing up the layout of the page. Your task is to write the missing code.

Tip: You need to set the property on only one element to get the layout just right.

Write HTML and CSS code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Missing Code</title>
</head>
<body>
<div class="main-container">
<header class="element header">Header</header>
<div class="element right-bar right-upper">Right Upper Content</div>
<div class="element left-bar left-upper">Left Upper Content</div>
<div class="element left-bar left-lower">Left Lower Content</div>
<div class="element right-bar right-lower">Right Lower Content</div>
<div class="element content">Main Content</div>
<footer class="element footer">Footer</footer>
</div>
</body>
</html>
Completed 2 of 3
Missing code
The code is correct.
___

Create a free account to access the full topic