PDA

View Full Version : Divs not extending 100%



SKY-ProToSs
Dec 9th, 2008, 01:12 PM
I'm trying to extend the divs on the border to 100%, seen correctly in IE but wont work in Firefox. They act as though they have a set width for some reason in firefox and dont even go more than half way down the layout. I have no idea why, but heres the code if anyone can find the solution


<!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>TwD TeaM : Home</title>
<style type="text/css">
html, body{
margin:0;
padding:0;
border:none;
background-color:#000000;
background-image: url(leftbackground.gif) repeat;
height:100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color: #000000;
font-weight:Regular;
background-image:#000000 url(); background-repeat: repeat; }
a, a:link, a:visited, a:active {
color:#000;
background-color:inherit;
text-decoration:none;
}
a:hover {
color:#AABCCD;
background-color:inherit;
}
* html #maincontainer {
height:100%;
}
#border {
height:100%;
width:850px;
margin:auto;
background: url(images/borderbg.jpg) center repeat-y;
color:#000000
min-height:100%;
}
* html #border {
height:100%;
}
#border2 {
width:900px;
margin:auto;
background:#0d141a;
color:#FFFFFF;
min-height:100%;
}
* html #border2 {
height:100%;
}
#border3 {
width:906px;
margin:auto;
background:#0f4359;
color:#FFFFFF;
min-height:100%;
}
* html #border3 {
height:100%;
}
#navbuttons {
font-size:10px;
font-weight:bold;
}
#container {
width:800px;
margin:auto;
background:#000000;
color:#FFFFFF;
min-height:100%;
}
* html #container {
height:100%;
}
#container2 {
height:800px;
color:#8adcfd;
padding="0";
}
#sidebar {
height:490px;
color:#8adcfd;
padding="0";
}
#header {
height:200px;
width:850px;
margin:auto;
background: url(images/banner.jpg) right #000000 no-repeat;
font-size:3;
color:#FFFFFF;
}
#header2 {
height:36px;
width:800px;
margin:auto;
background: url(images/header2.gif) repeat;
}
#contentscroll {
scrollbar-face-color:#16637f;
scrollbar-arrow-color:#0c3747;
scrollbar-track-color:#000000;
scrollbar-shadow-color:#000000;
scrollbar-highlight-color:#000000;
scrollbar-3dlight-color:#0080C0;
scrollbar-darkshadow-Color:#000000;
height: 510px;
width: 530px;
font-size: 12px;
overflow: auto;
border-bottom:1px solid #0c3747;
border-top:1px solid #0c3747;
}
#footer {
height:108px;
width:850px;
margin:auto;
background: url(images/footer.jpg) no-repeat;
}
#content {
background:#000000;
width:640px;
padding:0px;
float:left;
text-align:center;
position:relative;
}
#content p {
margin:0;
padding:0 0 5px 0;
text-align:justify;
}
#content object {
margin:10px auto;
display:block;
}
.clear {
clear:both;
line-height:0px;
font-size:0;
}
hr {
height:0;
line-height:0px;
font-size:0;
border:0;
border-bottom:1px solid #707070;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
</style>
<div id="border3">
<div id="border2">
<div id="border">
<div id="header">
<table height="200" bgcolor="#3985a6" width="130" cellpadding="5" cellspacing="5" align="left" valign="top" style="margin-left:10px; background:url(images/consolebg.jpg) no-repeat;">
</tr>
<td valign="top">
Future Console
</td>
</tr>
</table>
</div>
<div id="header2">
<table height="36" width="200" cellpadding="0" cellspacing="0" style="background: url(images/header2image.jpg) no-repeat;" align="left">
<tr>
<td>
</td>
</tr>
</table>
</div>
<div id="container">
<table id="container2" width="100%" bgcolor="#000000" align="left" cellpadding="0" cellspacing="0">
<tr>

<td width="200" valign="top" border="0" cellpadding="0" cellspacing="0">


<table width="200" cellpadding="0" cellspacing="0" border="0" style="background:url(images/sidebar.gif) repeat;">
<tr>
<td valign="top" height="40">
<img src="images/navigation.jpg" border="0">
</td>
</tr>
<tr>
<td valign="top" height="450">
<table width="200" cellpadding="5" cellspacing="0" border="0" id="navbuttons">
<tr>
<td bgcolor="#16637f" style="border-bottom: 1px #0d141a solid; border-top: 2px #0d141a solid;" align="center">
<a href="x">ğItem</a>

</td>
</tr>
<tr>
<td bgcolor="#16637f" style="border-bottom: 1px #0d141a solid; border-top: 1px #0d141a solid;" align="center">
<a href="x">ğItem</a>

</td>
</tr>
<tr>
<td bgcolor="#16637f" style="border-bottom: 1px #0d141a solid; border-top: 1px #0d141a solid;" align="center">
<a href="x">ğItem</a>

</td>
</tr>
<tr>
<td bgcolor="#16637f" style="border-bottom: 1px #0d141a solid; border-top: 1px #0d141a solid;" align="center">
<a href="x">ğItem</a>

</td>
</tr>
<tr>
<td bgcolor="#16637f" style="border-bottom: 1px #0d141a solid; border-top: 1px #0d141a solid;" align="center">
<a href="x">ğItem</a>

</td>
</tr>
<tr>
<td bgcolor="#16637f" style="border-bottom: 1px #0d141a solid; border-top: 1px #0d141a solid;" align="center">
<a href="x">ğItem</a>

</td>
</tr>
<tr>
<td bgcolor="#16637f" style="border-bottom: 1px #0d141a solid; border-top: 1px #0d141a solid;" align="center">
<a href="x">ğItem</a>

</td>
</tr>
<tr>
<td bgcolor="#16637f" style="border-bottom: 2px #0d141a solid; border-top: 1px #0d141a solid;" align="center">
<a href="x">ğItem</a>

</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="bottom" height="10"><img src="images/navbottom.jpg" border="0" height="40"></td>
</tr>
</table>


</td>
<td rowspan="2" height="40" valign="top" align="center" bgcolor="0d141a">
<table width="550" height="600" cellpadding="5" cellspacing="5" style="border: 1px #20708d solid;">
<tr>
<td height="40" bgcolor="#16637f">
</td>
</tr>
<tr>
<td height="460" bgcolor="#16637f">
<div id="contentscroll">
<table height="530" width="460">
<tr>
<td height="530">
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="200" valign="top">
</td>

</tr>
</table>
</div>
</div>
<div id="footer">
</div>
</div>
</div>
<div class="clear">&nbsp;</div>

<!-- --><script type="text/javascript" src="/i.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="none";_uff=false;urchinTracker();}</script><script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script> <script type="text/javascript">_qacct="p-44naSaXtNJt26";quantserve();</script> </body>
</html>

BoldUlysses
Dec 9th, 2008, 02:23 PM
Your code is a mess. Validate it (http://validator.w3.org/), and remember that tables are bad for layout (http://phrogz.net/css/WhyTablesAreBadForLayout.html).

Firefox is displaying your page correctly. Make your page look right in FF and then add conditional comments if you need to modify it for IE.

The reason your borders are acting as if they have a set width could be because you gave them a set width in your CSS:


#border {
height:100%;
width:850px;
margin:auto;
background: url(images/borderbg.jpg) center repeat-y;
color:#000000
min-height:100%;
}

I'm assuming you're looking for a way to have a background go all the way down the page regardless of the amount of content? If so, you might consider faux columns (http://www.alistapart.com/articles/fauxcolumns/).

SKY-ProToSs
Dec 9th, 2008, 02:43 PM
Your code is a mess. Validate it (http://validator.w3.org/), and remember that tables are bad for layout (http://phrogz.net/css/WhyTablesAreBadForLayout.html).

Firefox is displaying your page correctly. Make your page look right in FF and then add conditional comments if you need to modify it for IE.

The reason your borders are acting as if they have a set width could be because you gave them a set width in your CSS:


#border {
height:100%;
width:850px;
margin:auto;
background: url(images/borderbg.jpg) center repeat-y;
color:#000000
min-height:100%;
}

I'm assuming you're looking for a way to have a background go all the way down the page regardless of the amount of content? If so, you might consider faux columns (http://www.alistapart.com/articles/fauxcolumns/).

Sorry, I ment to say the height is not extending the whole way

abduraooft
Dec 9th, 2008, 02:57 PM
Sorry, I ment to say the height is not extending the whole way
But the other suggestions of msuffern are still valid! Have you checked them?

SKY-ProToSs
Dec 9th, 2008, 03:06 PM
But the other suggestions of msuffern are still valid! Have you checked them?

Yes, I validated them, and the other link didn't solve my problem.

It remains :(

BoldUlysses
Dec 9th, 2008, 03:22 PM
I'm surprised that link wasn't able to help you. It contains instructions on how to do the very thing you're interested in doing.

Post your validated code and a link to your page and we'll go from there.

SKY-ProToSs
Dec 9th, 2008, 03:27 PM
I'm surprised that link wasn't able to help you. It contains instructions on how to do the very thing you're interested in doing.

Post your validated code and a link to your page and we'll go from there.

http://twilightdragons.net84.net/


<!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>TwD TeaM : Home</title>
<style type="text/css">
html, body{
margin:0;
padding:0;
border:none;
background-color:#000000;
background-image: url(leftbackground.gif) repeat;
height:100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color: #000000;
font-weight:Regular;
background-image:#000000 url(); background-repeat: repeat; }
a, a:link, a:visited, a:active {
color:#000;
background-color:inherit;
text-decoration:none;
}
a:hover {
color:#AABCCD;
background-color:inherit;
}
* html #maincontainer {
height:100%;
}
#border {
height:100%;
width:850px;
margin:auto;
background: url(images/borderbg.jpg) center repeat-y;
color:#000000
min-height:100%;
}
* html #border {
height:100%;
}
#border2 {
width:900px;
margin:auto;
background:#0d141a;
color:#FFFFFF;
min-height:100%;
}
* html #border2 {
height:100%;
}
#border3 {
width:906px;
margin:auto;
background:#0f4359;
color:#FFFFFF;
min-height:100%;
}
* html #border3 {
height:100%;
}
#navbuttons {
font-size:10px;
font-weight:bold;
}
#container {
width:800px;
margin:auto;
background:#000000;
color:#FFFFFF;
min-height:100%;
}
* html #container {
height:100%;
}
#container2 {
height:800px;
color:#8adcfd;
padding="0";
}
#sidebar {
height:490px;
color:#8adcfd;
padding="0";
}
#header {
height:200px;
width:850px;
margin:auto;
background: url(images/banner.jpg) right #000000 no-repeat;
font-size:3;
color:#FFFFFF;
}
#header2 {
height:36px;
width:800px;
margin:auto;
background: url(images/header2.gif) repeat;
}
#contentscroll {
scrollbar-face-color:#16637f;
scrollbar-arrow-color:#0c3747;
scrollbar-track-color:#000000;
scrollbar-shadow-color:#000000;
scrollbar-highlight-color:#000000;
scrollbar-3dlight-color:#0080C0;
scrollbar-darkshadow-Color:#000000;
height: 510px;
width: 530px;
font-size: 12px;
overflow: auto;
border-bottom:1px solid #0c3747;
border-top:1px solid #0c3747;
}
#console {
height:200px;
}
#footer {
height:108px;
width:850px;
margin:auto;
background: url(images/footer.jpg) no-repeat;
}
#content {
background:#000000;
width:640px;
padding:0px;
float:left;
text-align:center;
position:relative;
}
#content p {
margin:0;
padding:0 0 5px 0;
text-align:justify;
}
#content object {
margin:10px auto;
display:block;
}
.clear {
clear:both;
line-height:0px;
font-size:0;
}
hr {
height:0;
line-height:0px;
font-size:0;
border:0;
border-bottom:1px solid #707070;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
</style>
<div id="border3">
<div id="border2">
<div id="border">
<div id="header">
<table id="console" bgcolor="#3985a6" width="130" cellpadding="5" cellspacing="5" align="left" style="margin-left:10px; background:url(images/consolebg.jpg) no-repeat;">
<tr>
<td valign="top">
Future Console
</td>
</tr>
</table>
</div>
<div id="header2">
<table width="200" cellpadding="0" cellspacing="0" style="background: url(images/header2image.jpg) no-repeat;" align="left">
<tr>
<td>
</td>
</tr>
</table>
</div>
<div id="container">
<table id="container2" width="100%" bgcolor="#000000" align="left" cellpadding="0" cellspacing="0">
<tr>

<td width="200" valign="top">


<table width="200" cellpadding="0" cellspacing="0" border="0" style="background:url(images/sidebar.gif) repeat;">
<tr>
<td valign="top" height="40">
<img src="images/navigation.jpg" border="0" ALT="nav">
</td>
</tr>
<tr>
<td valign="top" height="450">
<table width="200" cellpadding="5" cellspacing="0" border="0" id="navbuttons">
<tr>
<td bgcolor="#16637f" style="border-bottom: 1px #0d141a solid; border-top: 2px #0d141a solid;" align="center">
<a href="x">ğItem</a>

</td>
</tr>
<tr>
<td bgcolor="#16637f" style="border-bottom: 1px #0d141a solid; border-top: 1px #0d141a solid;" align="center">
<a href="x">ğItem</a>

</td>
</tr>
<tr>
<td bgcolor="#16637f" style="border-bottom: 1px #0d141a solid; border-top: 1px #0d141a solid;" align="center">
<a href="x">ğItem</a>

</td>
</tr>
<tr>
<td bgcolor="#16637f" style="border-bottom: 1px #0d141a solid; border-top: 1px #0d141a solid;" align="center">
<a href="x">ğItem</a>

</td>
</tr>
<tr>
<td bgcolor="#16637f" style="border-bottom: 1px #0d141a solid; border-top: 1px #0d141a solid;" align="center">
<a href="x">ğItem</a>

</td>
</tr>
<tr>
<td bgcolor="#16637f" style="border-bottom: 1px #0d141a solid; border-top: 1px #0d141a solid;" align="center">
<a href="x">ğItem</a>

</td>
</tr>
<tr>
<td bgcolor="#16637f" style="border-bottom: 1px #0d141a solid; border-top: 1px #0d141a solid;" align="center">
<a href="x">ğItem</a>

</td>
</tr>
<tr>
<td bgcolor="#16637f" style="border-bottom: 2px #0d141a solid; border-top: 1px #0d141a solid;" align="center">
<a href="x">ğItem</a>

</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="bottom" height="10"><img src="images/navbottom.jpg" alt="navbottom" border="0" height="40"></td>
</tr>
</table>


</td>
<td rowspan="2" height="40" valign="top" align="center" bgcolor="0d141a">
<table width="550" height="600" cellpadding="5" cellspacing="5" style="border: 1px #20708d solid;">
<tr>
<td height="40" bgcolor="#16637f">
</td>
</tr>
<tr>
<td height="460" bgcolor="#16637f">
<div id="contentscroll">
<table height="530" width="460">
<tr>
<td height="530">
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="200" valign="top">
</td>

</tr>
</table>
</div>
</div>
<div id="footer">
</div>
</div>
</div>
<div class="clear">&nbsp;</div>

<!-- --><script type="text/javascript" src="/i.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="none";_uff=false;urchinTracker();}</script><script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script> <script type="text/javascript">_qacct="p-44naSaXtNJt26";quantserve();</script> </body>
</html>

BoldUlysses
Dec 9th, 2008, 04:19 PM
If you want any background to extend all the way down the browser window, you'll have to put it on the html or body element in the CSS. Fortunately you can put different backgrounds on both, meaning you could place a general repeated pattern on the html, while you place a centered, repeat-y 900px-wide gif on the body element which would serve as your border and extend all the way down the page. The link (http://www.alistapart.com/articles/fauxcolumns/) details how to do this.

There's no quick-and-dirty one or two lines of code we can give you that will solve your problem. The solution above seems to be the quickest short of starting over.

SKY-ProToSs
Dec 9th, 2008, 05:01 PM
If you want any background to extend all the way down the browser window, you'll have to put it on the html or body element in the CSS. Fortunately you can put different backgrounds on both, meaning you could place a general repeated pattern on the html, while you place a centered, repeat-y 900px-wide gif on the body element which would serve as your border and extend all the way down the page. The link (http://www.alistapart.com/articles/fauxcolumns/) details how to do this.

There's no quick-and-dirty one or two lines of code we can give you that will solve your problem. The solution above seems to be the quickest short of starting over.

Thanks for your help, I think ill just start from scratch