Computer scienceFrontendCSSBasic propertiesPositioning

Float

Theory

Sidebar

Report a typo

You have probably visited a website that has at least one sidebar. Some are very simple and others are more complex, but the goal is the same. In this exercise, we will learn how to create a very simple sidebar layout.

To achieve this you need to add the float property in two elements so they look like the image below.

The page where footer and header are spanned by two columns and main content with the sidebar has their own columns

You can follow these steps if you are struggling:

  • 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: header, main-content, side-bar and footer.

  • Do not remove the mid-element class from the two middle divs, use space to separate each class.

  • Notice in the image that there is a space between the Main Content and the Side Bar.

Write HTML and CSS code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sidebar</title>
</head>
<body>
<div class="container">
<div class=""></div>
<div class="mid-element"></div>
<div class="mid-element"></div>
<div class=""></div>
</div>
</body>
</html>
Completed 1 of 5
There's a div with the class header that has the text Header.
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