The best way to line up content & navigation?

[Tonearm]

I've been experimenting with different ways of positioning my navigation and content so I can have the content come first in the source code. I can't seem to find anything that works well across browsers though.

My design is built around tables and I'd like to be able to leave it that way for now. I'm trying to just leave a space in the middle of the design for the content and then either:

a. position the content in the blank space of the design

or

b. position the design around the content so it fits in the blank space

Can anyone suggest the best way to pull this off?

[mipapage]

Without knowing too much about your design, the easiest way to do this would be to leave a hole where your navigation would fit and absolutely position the nav into that hole.

This assumes, however, that you know the size of the hole and that you aren't concerned about text resizing.

<div id="nav">nav goes here</div>

#nav {
position:absolute;
top: XX px from top;
left: XX px from left;
}

for (a very simple) example...

[willis1480]

well, i have delt with this problem before. Are you trying to make your page better for indexing by search engines? You can absolutely position content, but you will run into issues if your content changes location based on window width (eg. centered pages).

You can overcome this by using div box with display:none and display:block and relative positioning and absolute positioning.

You then use javascript for onLoad to change this div to block and relative positioning from display:none and position:absolute.

look at how the overture dropdown menu is done at overture.com

I am not positive if search engines will like this is or not.

It may be detremental for indexing since you may not search engines may not index this content at all.