This week's book giveaway is in the JavaScript forum.
We're giving away four copies of Svelte and Sapper in Action and have Mark Volkmann on-line!
See this thread for details.
Win a copy of Svelte and Sapper in Action this week in the JavaScript forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Bear Bibeault
  • Junilu Lacar
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • salvin francis
  • Frits Walraven
Bartenders:
  • Scott Selikoff
  • Piet Souris
  • Carey Brown

One Div Container inside Another

 
Ranch Hand
Posts: 2038
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Here I go again.

I am attempting to use fly out style menus

I have a navigation div container(left on page) with fixed width. I have another div container to the right of this one(body).

My menu div(ul's and li's) is placed inside this navigation container. My menu works great but the flyout goes to the right(navigation container grows wider with scroll) and is up under the body container. I don't want the body to move but need the flyout to remain on top.
 
Marshal
Posts: 67451
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Sounds like you need to take your menus out of the main layout flow to prevent containers from changing shape when menus are displayed. This is usually done with absolute positioning. And don't forget z-index.
 
Steve Dyke
Ranch Hand
Posts: 2038
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Bear Bibeault wrote:Sounds like you need to take your menus out of the main layout flow to prevent containers from changing shape when menus are displayed. This is usually done with absolute positioning. And don't forget z-index.



As always Bear you are a life saver. Thanks.
 
Steve Dyke
Ranch Hand
Posts: 2038
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Bear Bibeault wrote:Sounds like you need to take your menus out of the main layout flow to prevent containers from changing shape when menus are displayed. This is usually done with absolute positioning. And don't forget z-index.



I had this fixed then I realized that a div container used to display the navigation needed to be extended to bottom of page. So I added position: absolute to this div container( I don't know why it was never positioned before).

Now my menu div even though it is position absolute also is confined by the navigation container.

Please help with this once again.
 
Bear Bibeault
Marshal
Posts: 67451
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Move the structure of the menu outside the container.
 
Steve Dyke
Ranch Hand
Posts: 2038
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Bear Bibeault wrote:Move the structure of the menu outside the container.



Thanks again.
 
a fool thinks himself to be wise, but a wise man knows himself to be a fool - shakespeare. foolish tiny ad:
Building a Better World in your Backyard by Paul Wheaton and Shawn Klassen-Koop
https://coderanch.com/wiki/718759/books/Building-World-Backyard-Paul-Wheaton
    Bookmark Topic Watch Topic
  • New Topic