Something a bit more practical this week... No trick questions.

The Scenario

Start with this markup and CSS:

The Challenge

Update the CSS to position the navigation such that it is always in the top right corner of the header. Do not change the markup. Yes, you can use a browser to validate your work.

It should look like this:

How to Play

Post your updated CSS as a comment. Comments will be held in the moderation queue until 72 hours after this was posted. Full answer and explanation will be appended to this post at the same time (about lunch time Monday, UTC+10). Update: answer now posted.

If you don't want your answer public, please post a comment like 'playing at home' so I can at least guage how many people are participating and whether the questions are useful.

Follow @cssquiz to know when the answer is up and to catch the next question.

The goal of this week’s question was to understand positioning contexts.

The correct answer is:

For the long, detailed explanation of all of this, take a read of Noah Strokes’ CSS Positioning 101 article.

Here are the basic ideas though:

1. Using position: absolute; allows us to break the nav element out of the document flow and take control of exactly how it gets positioned. We then do this using top: 0; and right: 0;.
2. If we applied the previous changes on their own, the nav element would go to the top right corner of the page instead of the header though. This is because the body element is the containing block, and this is what the positioning is based off. We can change this by setting position: relative; on the header element, causing it to become a positioning context. The header element won’t move at all, but the nav element will now be positioned according to the header’s context instead of that provided by the body element.

A similar result can be achieved using floats, however this comes with a few downsides in this scenario. First up, it requires you float both the h1 and the nav elements. You’d then need to expand the header container in some way so that it still wraps the floats rather than collapsing back to nothing. This whole approach then becomes brittle – what happens when somebody adds a h2?

2 points if you used position, 1 point for float.

Next question will be up 4 days from now. Until then, have a go at this week's JavaScript Quiz.