1 reply [Last post]
Last seen: 19 years 11 weeks ago
Timezone: GMT+1
Joined: 2003-07-25
Posts: 1
Points: 0

I have two examples to show you, one created using tables, the other created using CSS positioning.

The table example is at http://www.minigallery.co.uk/index.asp
The CSS example is at http://www.minigallery.co.uk/sides.asp

Both pages are just about the same except for the way the navigation menu is positioned on the page.

What I am experiencing with the CSS example is that if the browser window is made too small the nav menu is moving over the content area which is something that does not occur in the tables example.

The content of each page is of a fixed width - most pages have a minimum content area of 500px + 200px for the nav menu.

The code I have used to postion the nav menu is this:

#navmenu {
	width: 200px;
	height: 400px;
	background-attachment: scroll;
	background-image: url(/images/2003bg.gif);
	background-repeat: no-repeat;
	background-position: right top;

How do I prevent the nav menu moving over the content area?
In many of the examples I have seen of float, the right area either moves under the content area or vice versa. Examples of absolute position seem to do the same as my example. I want both the content and menu to be displayed at the same time using CSS - I would much prefer to have a scroll bar than overlapping areas.

One other factor that makes it a little more difficult, is that if possible, I don't want the content and menu to be contained in the same div - I have many pages to update so the easy the method the better.

I have only really tested the code so far in IE6, the others will come later.


Chris Storey

Anonymous's picture

Recreate right nagivation menu using CSS and no overlapping

You have a nice design there and you want to get out of the habit of using tables since there is a big boom in converting sites to css heavy. It is hard at the start but hey, when you get the hang of it you can do anything. I used cssZenGarden to guide me when converting my site and I think you will have a lot more flexibility if you change over. This means scrapping tables all together. Use a better formed structure and visit www.w3c.org to get information on this because there is a big topic posted on this somewhere in there because I came across it before.