PDA

View Full Version : Make div width = page width, not window width?


snakebyte
May 19th, 2007, 07:29 PM
I recently discovered in the basic photo gallery script I've been coding that when an image large enough to require a horizontal scroll bar is shown, the title div only goes as far as the browser window width and does not show when you scroll to the right. Any ideas on how to fix this? It seems like it should be simple, but I've tried everything I could think of and didn't get anywhere.

You can see an example here (http://snakebyte.team-ftm.net/sc2/screenshots/?img=sc2_ss_01.jpg), and the code below. Sorry in advance if some of the CSS is sloppy or redundant.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>gallery: screenshots</title>
<style type="text/css">
<!--
.title1,.title1 * {
font-size: 36px;
}
.title2 * {
font-size: 16px;
}
a.arrow {
font-size: 80px;
color: #8698A5;
text-decoration: none;
}
a.arrow:hover {
color: #FFFFFF;
}
a.imglink {
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
}
body {
margin: 0px;
padding: 0px;
background: #000000;
font-family: arial,sans-serif;
}
img {
border: 1px solid #FFFFFF;
}
div.container {
clear: both;
margin: 0px;
padding: 0px;
border: none;
text-align: center;
}
div.container2 {
clear: both;
margin: 0px;
padding: 5px;
border: none;
text-align: center;
}
div.title {
margin: 0px;
padding: 5px;
text-align: left;
background: #596877;
border-bottom: 2px solid #8698A5;
font-size: 16px;
}
div.dir {
margin: 0px;
padding: 5px;
text-align: left;
background: #2C3949;
border-bottom: 2px solid #8698A5;
font-size: 16px;
}
div.dir * {
padding: 5px;
font-size: 16px;
}
div.image {
margin: 5px;
padding: 5px;
float: left;
width: 181px;
height: 181px;
background: #2C3949;
border: 2px solid #8698A5;
}
div.image table {
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
border: none;
}
div.imgcontainer {
margin: 0px;
padding: 15px;
text-align: center;
font-size: 16px;
color: #8698A5;
vertical-align: middle;
white-space: nowrap;
}
div.imgcontainer .fileinfo {
color: #FFFFFF;
font-size: 12px;
letter-spacing: 1px;
}
div.imgcontainer .fileinfo2 {
color: #8698A5;
font-size: 12px;
letter-spacing: 1px;
}
div.imgcontainer .fileinfo2 a {
color: #8698A5;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
}
div.imgcontainer .fileinfo2 a:hover {
color: #FFFFFF;
font-size: 12px;
letter-spacing: 1px;
}
div.imgcontainer .title {
font-size: 16px;
font-weight: bold;
text-decoration: underline;
}
div.imgcontainer * {
vertical-align: middle;
}
* {
color: #FFFFFF;
font-size: 12px;
}
-->
</style>
</head>
<body>
<div class="container">
<div class="title">
<span class="title1"><b>screenshots:</b> sc2_ss_01.jpg</span><span class="title2"><br>
<a href="<A href="http://snakebyte.team-ftm.net">http://snakebyte.team-ftm.net/</a">http://snakebyte.team-ftm.net">http://snakebyte.team-ftm.net/</a> <a href="<A href="http://snakebyte.team-ftm.net/sc2/">sc2/</a">http://snakebyte.team-ftm.net/sc2/">sc2/</a> <a href="<A href="http://snakebyte.team-ftm.net/sc2/screenshots/">screenshots/</a></span></div">http://snakebyte.team-ftm.net/sc2/screenshots/">screenshots/</a></span></div>
<div class="imgcontainer">
<a href=".?img=sc2_ss_15.jpg" class="arrow">«</a>&nbsp;&nbsp;&nbsp;<a href="."><img src="sc2_ss_01.jpg"></a>&nbsp;&nbsp;&nbsp;<a href=".?img=sc2_ss_02.jpg" class="arrow">»</a>
<br><br>
<span class="fileinfo2"><a href=".?img=sc2_ss_15.jpg">sc2_ss_15.jpg</a> « </span><span class="fileinfo"><b>sc2_ss_01.jpg</b> (1600x1200, 718.5k)</span><span class="fileinfo2"> » <a href=".?img=sc2_ss_02.jpg">sc2_ss_02.jpg</a></span></div>
</div>
</body>
</html>

(ps: StarCraft 2! :D)