Layout Activity

Moving elements around on the page

Activity Instructions

Here we will test out our knowledge of float, static position, absolute position, and relative position. The adjacent image is a screenshot of our finished goal. The objective is to use float and the different positioning schemes to arrange the elements to match the goal image.

Try to finish this activity without the tips

Ad1 Tip

Notice that Ad1 originally sits at the very top of the page. Which positioning style will take an element out of the normal flow of the document, place it in a specific location, and allow it to still scroll with the page?

Ad2 Tip

The same positioning style for AD1 would work well for AD2.

Left Nav Tip

The left navigation already sits where it is suppose to. Changing the positioning style is not necessary.

Columns Tip

The columns need to sit next to each other. It is tempting to set these elements to an absolute or relative position, but this should be resisted. How else can you get elements to sit next to each other without changing the positioning?

Bottom Nav Tip

The bottom nav should also not be underneath the columns and left nav. It should also not be sitting to the right of the third column. How do you stop an element from floating to the right/left of another element?