Align nested div to bottom
I hope someone can help, I would greatly appreciate it. I just can't get this to work in Firefox, IE and Safari are fine. I want the div to be aligned to the bottom of the parent div, in firefox, it aligns to the bottom of the browser. Thanks!
Here's my code:
<head>
<style type="text/css">
body{
height: 100%;
margin: 0;
padding: 0;
}
#body {
margin: 0px;
display: table;
width: 1000px;
position: relative;
height: 100%;
background-color: #0000FF;
}
#content_left {
float: left;
width: 245px;
background-color: #FF6633;
}
#content_right {
width: 679px;
float: left;
background-color: #FFFF00;
}
#side_bottom {
position: absolute;
bottom: 0px;
background-color: #FF00FF;
clear: both;
}
</style>
</head>
<body>
<div id="body">
<div id="content_left">Left<br />
Content<br />
Goes <br />
Here<br />
<br />
<div id="side_bottom">side bottom</div>
</div>
<div id="content_right">right</div>
</div>
</body>
</html>
CSS Codes
Reply With Quote
Bookmarks