fatinfo.com

There has always been a popular effective SEO tip with HTML tables to place the page content be left hand navigations - table trick explained. However, CSS allows you to position the main content above all navigation panels (including top, left and right navigation menus). The solution involves using absolute positioning and relative margin em units, instead of pixel units. Always apply the em unit to make margins and paddings scalable.

The main idea comes from a relatively old CSS article published by Netscape DevEdge. The important thing is to understand how CSS repositions the displaying of div blocks with the set document structures. Container ID #main must retain the border-top at 1px or else the structure breaks in Firefox.

Exact text of document structure with no CSS.

Simplified CSS file from Netscape DevEdge to position navigations over top placement of main page content.

After applying the CSS, you can see all the navigation panels are at the correct positions when displayed, at the same time the search engines will always read the main content before ever reaching the navigation text. There you have it, the CSS Content Before Navigation explained to help you optimize content for the search engines.

A website of a marketing agency applies this concept nicely on their index page. You will need to view source in order to see the content structured to be read first before navigation text. They have also optimized the page containing the flash file, turn off JavaScript to view the HTML page delivered text browsers and search engines for better website accessibility.