asked on

Bottom align nested div

How do I have a nested Div (mainTable ) align to the bottom of the parent div(content ) in both IE and FF?

<style>
html, body { height: 100%; min-height:100%; height:auto!important; }
body { margin: 0; padding: 0; background: #d7e3ea; /*right bg */}
#background { /*left bg */ position: absolute; width: 50%; height: 100%; background: #000000;}
#content { position: relative; z-index: 1; height: 100%; /* puts content on top of background in stack order */ margin:0px auto; /*to center in IE*/ text-align:center;}
#mainTable { margin:0px auto; /*to center in IE*/ text-align:center; height: 100%; min-height:100%;  width: 1077px; left:-9px; position: relative; background-image:url(images/shaded_bg.jpg); background-repeat:repeat-y; }
</style>

Open in new window

level9wizard

use position: absolute and bottom: 0; you will need to define a static height for this as well - for example height: 100px;

#mainTable {
height: 100px;
width: 100px;
position: absolute;
bottom: 0;
}

pGustafson

ASKER

I need to have the mainTable div at the bottom of the browser though.

Binylkumar

Hi,

I am not able to get your exact requirements. Could you please post your question clearly.

pGustafson

ASKER

I need to have div (mainTable) bottom and center aligned to the browser window. that div is inside div (content).

Everything I have tried doesn't allow me to have a nested Div bottom aligned to the browser window.

ASKER CERTIFIED SOLUTION

Binylkumar

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

pGustafson

ASKER

Thank you, that worked awesome.