ISTA 230 Introduction to Web Design (Fall 2017)

Relative Positioning


Download the exercise files found here. Relative positioning can be used to change the order in which content is displayed within the browser.

Consider the following webpage.

Unstyled website

The content of the page is displayed by default with the main content being displayed before a sidebar, which in turn is displayed before the page navigation. While this layout is ideal for the accessibility needs of the site, you have been tasked with styling the page so that it looks as follows:

Styled website

Using your understanding of relative positioning (as well as other CSS properties), style the content of the HTML file so that the content is presented in three columns, with the navigation is on the left, the main content is in the middle, and the sidebar is on the right.

The goal of this exercise is to provide an opportunity to use relative positioning. While the HTML may not be ideal for the design that you're working towards, it does not need to be modified in order to complete this exercise. Try to complete the exercise without making any changes to the HTML.


This technique is a difficult one (one of the reasons it is so rarely used). It is recommended that you start by styling the page header and footer first, followed by the three columns. You'll want to use a combination of float properties, position properties, and negative margins to achieve the desired layout.


Solution can be downloaded here.