DaNuGai Posted January 12, 2009 Share Posted January 12, 2009 I am trying to achieve something like this...However, I can't seem to get the footer on the bottom and height="100%" nor can i get the vertial-align="middle"Any help will be greatly apprecaited...thx <!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> <title>Title</title> <style> * { border: none; padding: 0; margin: 0; z-index: 0; } html, body { height: 100%; } div { position: relative; } #wrapper { left: 50%; margin-left: -385px; width: 770px; height: 100%; } #header { width: 770px !important; height: 150px !important; background: url("images/header.png"); background-repeat: no-repeat; } #body { display: table-cell; width: 740px !important; min-height: 370px; padding-left: 15px; padding-right: 15px; background: #fff; vertical-align: middle; text-align: center; } #footer { color: #cccccc; width: 740px !important; height: 60px !important; padding-left: 15px; padding-right: 15px; padding-top: 15px; background: url("images/footer.png"); background-repeat: no-repeat; font-size: 7pt; text-align: center; } </style></head><body> <div id="wrapper"> <div id="header"> </div> <div id="body"> <span>I want everythig under ID="body" to be in the Center (horizontally) and in the middle vertically</span> </div> <div id="footer"> <span>© 2009 Blah Blah Blah</span> </div> </div></body></html> Link to comment Share on other sites More sharing options...
jeffman Posted January 12, 2009 Share Posted January 12, 2009 Adding these lines to your footer CSS will put it on the bottom:position: absolute;bottom: 0px;The "body" div is trickier. table-cell is a funky display mode. It's the only element that seems to support vertical-align: middle, which is why you chose it. But other CSS properties don't mix well. min-height seems to clobber it, while height does not. So you could assign a fixed height, as dangerous as that is. bottom: 60px would be ideal for your page, but this also clobbers the vertical-align. You may have to make choices.But I'd love to read about a solution that does work. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.