Computer scienceFrontendCSSBasic propertiesPositioning

Clear

Theory

Page Layout

Report a typo

When browsing the internet, you come across a lot of different layouts, each with a unique style. To master the art of making amazing layouts, we must practice a lot.

Your task here is to make a layout similar to the image below.

The page has three rows and three columns where header and footer are stretched to full width and content has two bars on the sides

Here's what you should do:

  • Add the corresponding classes to each div in the HTML code (the order matters).

  • These are the classes that you need to add to the elements: left-bar, main-content and right-bar.

  • Do not remove the mid-element class from the three middle divs.

  • Add the specific classes to the three middle elements, use space to separate each class.

  • Use float and clear to position the elements.

Write HTML and CSS code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Layout</title>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="mid-element"></div>
<div class="mid-element"></div>
<div class="mid-element"></div>
<div class="footer">Footer</div>
</div>
</body>
</html>
Completed 3 of 7
There's a div with the class left-bar. The text is Left Bar. It has the correct float value.
There's a div with the class main-content. The text is Main Content. It has the correct float value.
___

Create a free account to access the full topic