Need help with keeping a nested div visible when the browser window is less than 800 pixels tall

Question

I have two divs: an outer div that is always 800 pixels high, and an inner div that’s 150 pixels high. The inner div is positioned 60 pixels from the bottom of the outer div.

The outer div is also vertically centered within the browser window.

<div id='outer'>
   <div id='inner'>
     some stuff
   </div>
<div>

<styles>
#outer
{
  position: relative;
text-align: left;
width: 1200px;
height: 800px;
min-width: 1000px;
min-height: 750px;
margin: 0px auto;
}
#inner
{
  position: absolute;
  background: rgba(10, 9, 9, .9);
  height: 150px;
  width: 100%;
  z-index: 1;
  bottom: 60px;
  overflow: hidden;
}

I need to adjust my CSS so that if the browser window is less than 800 pixels high, the inner div is positioned 60 pixels from the bottom of the browser window (so that it stays visible), instead of 60 pixels from the bottom of the outer div.

But when the browser window is taller than 800 pixels, I want the inner div to be positioned 60 pixels from the bottom of the outer div.

Answer 1

You must add position:relative to the outer div for it to become a container for absolutely positioned elements

I don't really understand your question, so this is my best guess.

Answer 2

Hmm, my guess is that you want the inner div to always be on top of the outer div, no matter the size of the window.

I'm thinking that what you are looking for is position: fixed, or maybe generally some help on CSS positioning: http://www.w3schools.com/css/css_positioning.asp and use of z-index: http://www.w3schools.com/css/pr_pos_z-index.asp

I'd go with this css:

#inner
{
position: fixed;
z-index: 1;
width; 100%;
height: 150px;
bottom: 60px;
}

Answer 3

Perhaps you could use CSS3 Media queries as documented here:

http://www.w3.org/TR/css3-mediaqueries/#height

These will work in most capable browsers but not IE and would allow you to write css that only kicks in when the browser is of a certain width / height (and much more). They're quite useful for styling things differently for the iPad and iPhone for example.

There is a jQuery plugin to make them work IE...

www.protofunc.com/scripts/jquery/mediaqueries/

...but it only supports width based media queries unfortunately. :-/

Answer 4

If I remove 'min-height' and then add this line:

#outer { max-height: 100% }

it works (but the outer element is smaller).