Thu, 2008-09-18 17:59
Hello,
I'm trying to make a column (menu) on the left side that is 100% of the browser height, with a grid of pictures/captions (pieces) to the right.
I read that to make the left column div 100%, you need to set the body to 100%.
It works, but only if the column div's position is set to absolute, which makes my grid begin underneath the column, instead of to the side.
<!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=UTF-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- body { background-color: #66FFFF; margin: 0px; padding: 0px; height: 100%; } .menu { background-color: white; padding: 0px; width: 50px; height: 100%; float: left; margin-right: 20px; margin-left: 0px; margin-top: 0px; position:absolute; } .pieces { background-color: white; padding: 0px; width: 215px; text-align: center; float: left; margin-left: 15px; margin-top: 15px; } .style1 { font-family: Arial, Helvetica, sans-serif; font-size: 10px; } --> </style> </head> <body> <div class="menu"> <p></p> </div> <div class="pieces"><img src="../../../Desktop/Picture 20.png" width="215" height="215" hspace="0" vspace="0" /> <p class="style1">Onwhatever whatslkdjflk sdfjlskdjfksdjf;asldkfj;alksdjf;lk</p></div> <div class="pieces"><img src="../../../Desktop/Picture 20.png" width="215" height="215" hspace="0" vspace="0" /> <p class="style1">h Hatever whatslkdjflk sdfjlskdjfksdjf;asldkfj;alksdjf;lk</p></div> <div class="pieces"><img src="../../../Desktop/Picture 20.png" width="215" height="215" hspace="0" vspace="0" /> <p class="style1">Orsewhatever whatslkdjflk sdfjlskdjfksdjf;asldkfj;alksdjf;lk</p></div> <div class="pieces"><img src="../../../Desktop/Picture 20.png" width="215" height="215" hspace="0" vspace="0" /> <p class="style1">sewhatever whatslkdjflk sdfjlskdjfksdjf;asldkfj;alksdjf;lk</p></div> <div class="pieces"><img src="../../../Desktop/Picture 20.png" width="215" height="215" hspace="0" vspace="0" /> <p class="style1">orsewhatever whatslkdjflk sdfjlskdjfksdjf;asldkfj;alksdjf;lk</p></div> <div class="pieces"><img src="../../../Desktop/Picture 20.png" width="215" height="215" hspace="0" vspace="0" /> <p class="style1">hatever whatslkdjflk sdfjlskdjfksdjf;asldkfj;alksdjf;lk</p></div> <div class="pieces"><img src="../../../Desktop/Picture 20.png" width="215" height="215" hspace="0" vspace="0" /> <p class="style1">sewhatever whatslkdjflk sdfjlskdjfksdjf;asldkfj;alksdjf;lk</p></div> <div class="pieces"><img src="../../../Desktop/Picture 20.png" width="215" height="215" hspace="0" vspace="0" /> <p class="style1">ewhatever whatslkdjflk sdfjlskdjfksdjf;asldkfj;alksdjf;lk</p></div> </body> </html>
Thanks!
Thu, 2008-09-18 20:04
#1
html and body need to be
html and body need to be 100%.
Thu, 2008-09-18 22:36
#2
Genius!
Gah, thanks!
I knew it would be something tiny like that.
Works lovely now.
Thu, 2008-09-25 04:29
#3
Works, but
I got it to work, but now if my content is long enough that the page needs to scroll, the bar on the left stops when I scroll past the original screen height.
Any way to fix that?
Thanks.
Fri, 2008-09-26 21:41
#4
What browser
What browser are you testing in? IE6?
If I remember right, IE6 does some weird things with 100% height.