Member Avatar for sadiebee

Hi everyone,

I am having trouble getting my container div to expand in height so as to fully contain my submenu div (absolutely positioned on left) within it. Currently, the container expands as text on the page content div (which is absolutely positioned on the right) grows.

When the page content is minimal, and therefore shorter than the submenu, then the container remains shorter than the submenu making it look like the submenu overlaps the footer. (see attached image)

My basic structure is as follows:

<div id="outerDiv">
  <div id="header">
    <div id="bannerMenu"></div>
    <div id="mainMenu"></div>
  </div>
  <div id="contentPage">
    <div id="subMenu"></div>
    <div class="pagetext"></div>
  </div>
  <div id="footer"></div>
</div>

No floating divs. No height attributes, except for footer and header.

Anyone have ideas what could be wrong? If it is easier to "diagnose" here are links to the problematic page and the stylesheet.

Many thanks!

container-not-expanding.png 132.76 KB
  • 2 Contributors
  • 1 Reply
  • 86 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by laura_ci
Member Avatar for laura_ci

Hi I don't know if you've fixed this problem yet yourself, but to me I reckon the issue is with have the sub menu div postioned absolute. It kind of means that everything else on the site after this (in the code) doesn't relate to it's height, position, etc.

Why don't you change the css to relative positioning? That should solve the issue. Although from what I can see of the code (the links you supplied didn't work), you probably don't need positioning at all.

You may need to tweak the margins, padding, etc. afterwards, just to get everything to sit in place again.

Good Luck

Edited by laura_ci because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.