Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Positioning Div menu relatively above content

Status
Not open for further replies.
vickero007

vickero007

IS-IT--Management
Apr 1, 2003
308
US
I have created absolutely position divs with submenu content, above the rest of the content with no problem. Because, regardless of the window size the menu is always in the same place.

How do I position divs containing submenus, relative to the menu link they should be under, like on So that, when the windows is resized, or is a different size it's always in the right place.

Thanks,

-Volkoff007
 
Sort by date Sort by votes
Well, I'm not sure I understand what you mean, but if you position a container div absolutely, you can then add relatively positioned elements within it (other divs, whatever) and they will be relatively positioned to themselves and the container div.

Hope that is helpful.
 
Upvote 0 Downvote
If that container div is a table, will that mess everything up?
 
Upvote 0 Downvote
I mean, if that container div is in a table...
 
Upvote 0 Downvote
An absolutely positioned div is not really within anything. You can define the div wherever you want. Of course, some browser will probably try to prove me wrong, so define the div at the end or something to avoid confusion.
 
Upvote 0 Downvote
Absolutely positioned elements are positioned inside their first positioned parent. If none such parent exists then they are positioned accoring to the viewport. Since they do not obstruct the flow of the document, their size could be bigger than that of parent element but still their original coordinates (left: 0; top: 0;) reflect the parent container. Consider the following:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<div style="position: absolute; width: 50px; height: 50px; top: 0; left: 0; background: red;"></div>

<div style="position: relative; margin: 200px auto; width: 400px; height: 200px; border: 1px solid black;">
<div style="position: absolute; width: 50px; height: 50px; top: 0; left: 0; background: brown;"></div>
<div style="position: absolute; width: 50px; height: 50px; bottom: 0; right: 0; background: purple;"></div>
</div>

<div style="position: absolute; width: 50px; height: 50px; bottom: 0; right: 0; background: blue;"></div>
My three Windows browsers all acknowledge that.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
361
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
285
PeDa
PeDa
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
319
tyutghf
tyutghf
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
107
jason.lex
jason.lex
Krus1972
  • Locked
  • Question
Centering Content Within a Fixed Navigation Menu
Replies
10
Views
164
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top