Exercise

As you have probably concluded by now, the position property is a big deal in web design and it’s fundamentally important to have a solid grasp on the various values before moving any further in this book. To solidify our learning, let’s put what we have learned into practice. Let’s create a website menu system using the techniques outlined above, following these steps:

1. Inside your index.html page, create a new div with an id of ‘nav-bar’.
2. Give the nav-bar some CSS rules to make it a fixed position element.
3. Make the element sit at the top of the page and stretch to the full width of the page.
4. Inside the nav-bar include an unordered list (ul) of links.
5. Using the techniques outlined above and in the previous chapters position the links side by side without any bullet icons rendering at all.
6. Save your work and preview in the browser.

Overflow

Overflow refers to content that exists outside of the bounds of an element. If, for instance, we have a div, which we set the height and width of, then add text content to. If the text spans out further than the size of our div, then we need to specify how the browser should handle this situation. By default, the content would spill out from the bottom of the box, which can look untidy. Let’s see our options for improving this.

Below, we will look at the example of an overflowing box with no CSS rule in place for overflow, so default values will be used.