• Locked
4 replies [Last post]
Thu, 2008-09-18 17:59
thatwheel
Offline
newbie
Last seen: 12 years 30 weeks ago
Joined: 2008-09-18
Posts: 3
Points: 0

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!

Top
Tags:
Thu, 2008-09-18 20:04
#1
Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 30 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

html and body need to be

html and body need to be 100%.

On Having Layout | The One True Layout | menus by listamatic

Top
Thu, 2008-09-18 22:36
#2
thatwheel
Offline
newbie
Last seen: 12 years 30 weeks ago
Joined: 2008-09-18
Posts: 3
Points: 0

Genius!

Gah, thanks!

I knew it would be something tiny like that.

Works lovely now.

Top
Thu, 2008-09-25 04:29
#3
thatwheel
Offline
newbie
Last seen: 12 years 30 weeks ago
Joined: 2008-09-18
Posts: 3
Points: 0

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.

Top
Fri, 2008-09-26 21:41
#4
MikePixel
MikePixel's picture
Offline
Enthusiast
Everett, WA
Last seen: 6 years 44 weeks ago
Everett, WA
Timezone: GMT-7
Joined: 2008-06-20
Posts: 91
Points: 8

What browser

What browser are you testing in? IE6?

If I remember right, IE6 does some weird things with 100% height.

~MikePixel
www.cornerpixel.net
deki.cornerpixel.net
MikePixel - My Life, One Pixel at a Time

Top
  • Locked