[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1165
  • Last Modified:

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

0
pGustafson
Asked:
pGustafson
  • 3
  • 2
1 Solution
 
level9wizardCommented:
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;
}
0
 
pGustafsonAuthor Commented:
I need to have the mainTable div at the bottom of the browser though.
0
 
BinylkumarCommented:
Hi,

I am not able to get your exact requirements. Could you please post your question clearly.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
pGustafsonAuthor Commented:
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.
0
 
BinylkumarCommented:
Hi,

Try this,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Binylkumar</title>
<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 {position:fixed; left:0; bottom:0; width:100%; border-top:solid 1px #ffffff;border-bottom:solid 1px #988753; z-index:100; background:#FFCC00; }
p {text-align:left;padding:4px 4px;font:normal 12px tahoma;)
</style>

</head>

<body>
<div id="content">
<p>Welcome to experts-Exchange, Welcome to experts-Exchange</p>
<div id="mainTable">asdfasdfds</div>
</div>
</body>
</html>
0
 
pGustafsonAuthor Commented:
Thank you, that worked awesome.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now