reportingsjr Posted December 20, 2006 Share Posted December 20, 2006 For some reason every time I try and make a div be the whole page length it doesnt work. Anyone know why and a workaround? Code... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Template</title><style type="text/css">body{ background-color: #858585; color: #A9A9A9; font-family: Arial, Helvetica, sans-serif;}div.wrapper{ width: 80%; margin: auto; height: 100%; background-color: #000000;}div.header{ height: 40px; font-size: 20pt; text-align: center;}div.links{ width: 15%; height: 100%; float: left;}div.content{ padding: 5px;}div.footer{ text-align: center; font-size: 10px;}a:link{ color: #FE9D35;}a:visited{ color: #FE9321;}a:hover{ color: #FD8300; text-decoration: none;}a:active{ color: #A9A9A9;}</style></head><body><div class="wrapper"> <div class="header"> My template </div> <div class="links"> <a href="this.php" title="Blah">This!</a> </div> <div class="content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis purus felis, facilisis sit amet, suscipit eu, elementum ac, risus. Etiam vulputate risus a arcu. Ut mollis condimentum massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse volutpat. Proin auctor viverra turpis. Quisque id enim. Aenean dictum diam sollicitudin nunc. Ut gravida neque at diam. Integer turpis turpis, bibendum eget, sollicitudin ut, venenatis id, dolor. Cras vehicula, sapien et suscipit malesuada, orci sem elementum metus, sit amet dictum odio est ut urna. Aenean enim. Maecenas orci mi, tempus ut, aliquam a, accumsan sit amet, nisi. Suspendisse eu lorem quis neque iaculis vulputate. Aenean ac elit. Ut tincidunt, lorem eu vehicula varius, est elit nonummy purus, vel facilisis est augue varius eros. Pellentesque imperdiet egestas mi. Aenean viverra dictum augue. Quisque at lectus. Proin eget lorem.Integer massa lectus, aliquam sit amet, elementum sed, dictum et, quam. Duis posuere dui vitae pede. Donec quis felis. Mauris suscipit imperdiet purus. In a tellus. Fusce adipiscing erat quis mauris. Nunc viverra, lectus vel aliquet volutpat, nisl nibh vulputate dui, ut vulputate mauris arcu eu lorem. Sed non arcu. Quisque id risus. Sed consectetuer, mauris non lacinia cursus, tortor quam elementum est, id blandit neque mauris vitae nisi.Duis porta, elit vel feugiat ornare, sapien neque fringilla velit, ut hendrerit turpis sem eget diam. Sed pede nibh, condimentum vitae, mattis ac, aliquet sit amet, risus. Maecenas magna. Sed lorem nisl, pulvinar quis, semper eu, accumsan sit amet, magna. In a nulla vitae diam consectetuer mattis. Suspendisse eu sem. Donec scelerisque orci in magna. Integer in eros. Etiam nibh arcu, tincidunt sit amet, tristique ac, porttitor a, elit. Curabitur porttitor scelerisque lorem. Suspendisse est augue, commodo sed, egestas in, aliquam in, dui. Etiam vel purus sit amet lorem vehicula ullamcorper. Mauris iaculis auctor mi. Ut nunc. Nulla arcu lacus, vestibulum id, pellentesque nec, varius vel, velit. Aenean turpis. Duis scelerisque augue ut sapien.Vivamus enim eros, egestas vel, dignissim eget, fringilla quis, est. In euismod. Nulla facilisi. Sed a mi sed magna viverra mattis. Donec at leo vel ante accumsan varius. Suspendisse varius dolor et nibh. Nullam est nulla, nonummy a, viverra ac, suscipit quis, turpis. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis volutpat. Integer quis magna. Nunc vestibulum eros fringilla nisi pellentesque bibendum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ultricies egestas orci. In et nisi. Praesent elementum magna in neque. Nunc tristique orci vel lorem. Suspendisse ligula.Fusce eu est vitae magna imperdiet gravida. Morbi condimentum odio vitae odio. Mauris purus ligula, fermentum eget, eleifend non, commodo non, lorem. Duis ornare justo in neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras malesuada. Integer sapien odio, rhoncus vel, aliquam in, consequat nec, metus. Ut auctor, tortor a dapibus lacinia, sem felis eleifend risus, at interdum odio dolor in metus. Pellentesque et magna. Vestibulum posuere facilisis nunc. Sed vestibulum, justo et dictum ullamcorper, libero arcu gravida eros, et tristique tortor erat eu felis. Suspendisse blandit pede sed massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut cursus. Nam erat. In non urna. </div> <div class="footer"> Template made by Jon Neal. </div></div></body></html> The wrapper div should extend along the whole page and the links div should go all the way down that as well.. Help!!! Link to comment Share on other sites More sharing options...
Sniffy Posted December 20, 2006 Share Posted December 20, 2006 I don't really know why, but I do know is that div elements inside a <td> with height: 100% align themselves to the top of the cell for some reason. Link to comment Share on other sites More sharing options...
reportingsjr Posted December 20, 2006 Author Share Posted December 20, 2006 Err, would you like to explain what that has to do with this? I still havent found a solution.. Link to comment Share on other sites More sharing options...
ste Posted December 20, 2006 Share Posted December 20, 2006 since moving from tables to divs one problem that keeps cropping up for me is that divs arent great for making columns because of the inability to get equal heights there have been a few suggestions to this problem ive read. one is javascript getting the div by id and making the heights equal. heres an examplehttp://ecomireland.dsvr.co.uk/clients/test/reportingsjr.htmlhope this helps Link to comment Share on other sites More sharing options...
jesh Posted December 20, 2006 Share Posted December 20, 2006 Another suggestion is to set the height of the html and body elements explicitly to 100%: html, body { height: 100%; }#myDiv { height: 100%; } It tends to work for me. You may also have to set the margins to 0 for the body or add some margins/padding to the div to get it to work just right. Link to comment Share on other sites More sharing options...
reportingsjr Posted December 20, 2006 Author Share Posted December 20, 2006 the html body height thing does not work.. Just to tell you. Thank you ste, that works well enough for now . Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now