1 reply [Last post]
ag73
Offline
newbie
Last seen: 15 years 47 weeks ago
Joined: 2004-01-14
Posts: 2
Points: 0

It is working now but there page is now larger than the browser window any clues on why?

Hi there I have this div that is positioned 160px from the top. I want this div to stretch from here down to the bottom of the page so that the border on the right hand side of the div connects with the footer.
Thanks in advance for any help!
The code is as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" title="currentStyle">
body{
color: #000;
background: #fff;
margin: 0px auto;
height:100%;
}
#container{
position:absolute;
top:0px;
left:17px;
width:747px;
height:100%;
background-color:#fff;
}
#topBanner{
width:747px;
height:103px;
background-color:transparent;
}
#logo{
position:relative;
top:0px;
left:610px;
width:112px;
height:40px;
}
#columnOne{
position:relative;
width: 186px;
height:100%;
float: left;
margin-top: 14px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #CCCCCC;
}
#footer{
position:absolute;
background-color:#ADB3BF;
bottom: 0px;
left: 17px;
width:747px;
height: 20px;
vertical-align:middle;
text-align:right;
z-index:100;
}

#footer a{
font:10px Arial, Helvetica, sans-serif;
text-decoration:underline;
color:#726AFF;
margin-right:10px;
}
#footer a:hover{
font:10px Arial, Helvetica, sans-serif;
text-decoration:underline;
color:#FF6633;
margin-right:10px;
}
</style>
</head>

<body>
<div id="container">
<div id="topBanner" style="background: transparent url(images/collageTop.jpg) no-repeat;">
<div id="logo"><img src="images/logoLabel.gif"></div>
</div>
<div id="columnOne">
how do I stretch this div all the way to the bottom so that the border on the right here connects with the footer </div>
</div>
<div id="footer"><a href="#">copyright notice</a></div>
</body>
</html>

Jonathan
Jonathan's picture
Offline
newbie
Nashville, TN
Last seen: 15 years 47 weeks ago
Nashville, TN
Timezone: GMT-6
Joined: 2004-01-17
Posts: 5
Points: 0

height problem

The easiest way would be using a bg image hack. but don't expect too much from IE if you want something flush against the border.

http://www.alistapart.com/articles/fauxcolumns/

I am confused as to what you want done. Do you want the grey bar at the bottom to be on the bottom of the window at all times or just the bottom of the page?