...and content is in the middle.

But when a screen reader looks at the page, it will read the content first because it goes from top to bottom. That's the great thing about using div tags and C S S for positioning. You can put page sections in the order you want them read by a screen reader, while having them appear on the page in a familiar way.

This code makes it happen:

<div style="Content" class="ContentLocation">
<p>...and content is in the middle. </p>
</div>

<div style="SectionNavigation" class="SectionLocation">
<p>...page navigation is on the left...</p>
</div>

<div style="Navigation">
<p class="NavigationLocation">Visually speaking, navigation appears at the top... </p>
</div>

... page navigation is on the left...

Return to top of previous page

Return to example of style sheet script