Center Web page and drop down menues

With the code below, I will always center my webpage regardless of resolution. But then I have to position my drop down menues relatively to where certain items on the webpage er placed depending on the resolution. Today I am using absolute positioning, and that is not working when I center the webpage by the code below. Does anyone know of any good tutorials or tips on how to position a drop down menu, when the web-page is centered as shown in the code box below? Right now I am using hidden absolutely positioned div fields that are shown via a simple javascript when hovering a link, and then hidden again when the link is not hovered anymore.
body
{
	text-align: center;
}

div#container
{
	margin-left: auto;
	margin-right: auto;
	width: 50em;
	text-align: left;
}

Open in new window

LVL 2
itniflAsked:
Who is Participating?
 
Eternal_StudentCommented:
You can use http://tinyurl.com/ to post a link.

So am I correct in saying that the menu is not appearing in the same position for different resolutions and browser sizes?

Perhaps you need to give your container div a position relative so that anything positioned absolutely inside that will be relative to the container and not the browsers size?

 
div#container
{
margin: 0 auto;
width: 50em;
text-align: left;
position:relative;
}

Open in new window


Without seeing all of your code, that is a stab in the dark ^
0
 
Eternal_StudentCommented:
Do you have a working example we can look at?
0
 
itniflAuthor Commented:
Yes I have, but I want to keep it to myself :) I was hoping on a general tutorial on how to position a drop down menu correctly next to an item like an link, table or div no matter the size of the browser or resolution that is used(wich affects where that item is placed).
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Jagadishwor DulalBraces MediaCommented:
To center align your content use one div with margin 0 auto. And to use it will be better to use a div for menus and others Like:

#wrapper{
  width:980px; /*YOur Wrapper size*/
 margin:0 auto;
}

Open in new window

It will center align your div and you can add menus inside the div.
0
 
itniflAuthor Commented:
You were right on. Obviously I don't know much about mixing relative and absolute positions. Here I undersand that if the parent div is positioned relative, then the absolute positioning within that div are measured out from that? Could you paste any links that explain this?
0
 
Eternal_StudentCommented:
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.