PDA

View Full Version : Content getting clipped at bottom - PLEASE HELP!



ShootingBlanks
Dec 4th, 2008, 07:20 AM
Hello. I'm having an impossible time trying to get my page to behave properly. First, here's a link to the testing site:

http://www.tromadance.com/hoffman_test2/index.php

The black left/right borders are supposed to go down to the bottom of the page (as long or short as that may be, depending on the content). Whichever is longer between the left side content or the right side content should be in charge of "stretching" the page. There is also a footer that should remain at the bottom, which is not even being shown...

I added borders to some of the divs to try to see what was going on. It looks like a mess, but I'm not sure what i am doing wrong!...

Here is the CSS, followed by the HTML...

CSS:

/* CSS Document */

html, body {
background-color: #8A1410;
font-family: Geneva, Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
color: #000;
height: 100%;
}
p {
font-size: .8em;
}

#container {
background: #EC1D25;
width: 800px;
margin: auto;
padding: 0px;
text-align: left;
border-left: 2px solid #000;
border-right: 2px solid #000;
min-height: 100%;
}
* html #container { /* we only need to target IE6 so this is okay */
height:100%;
}
/* hide from IE Mac\*/
#container {
height:100%;
}

#header {
background-color: #EC1D25;
width: 800px;
height: 177px;
background: url(../images/header_top.jpg) top center no-repeat;
margin-bottom: 0px;
padding-bottom: 0px;
margin-top: 0px;
}

#nav {
background-color: #000;
color: #FFF;
text-align: center;
width: 100%;
height: 50px;
}
#nav p {
margin-top: 30px;
}

#sidebar {
background-color: #EC1D25;
width: 265px;
float: left;
margin-top: 20px;
text-align: center;
margin-left: 10px;
border: 1px solid #999;
}
#donate {
background-color: #000;
width: 265px;
height: 500px;
}

#maincontent {
background-color: #7AD3F7;
margin-top: 20px;
margin-right: 10px;
height: 100%;
width: 485px;
float: right;
border: 1px solid #66F;
}

#spacer {
clear: both;
border: 1px solid #FF0;
}

#footer {
font-size: .7em;
text-align: center;
height: 20px;
margin-top: 10px;
}

HTML:

<!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>TROMADANCE!</title>
<link href="includes/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="header"></div>
<div id="nav"><?php include("includes/nav.php") ?></div>
<div id="sidebar">
<object width="265" height="210"><param name="movie" value="http://www.youtube.com/v/zQR7sDpGegw&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zQR7sDpGegw&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="265" height="210"></embed>
</object>
Tromadance 10th Anniversary PSA
<p>
<div id="donate">
</div>
</p><br />
<p>asdsadsa</p>
</div>
<div id="maincontent">
<p>SAMPLE TEXT</p>
</div>
<div id="spacer"></div>
<div id="footer"><?php include("includes/footer.php") ?></div>
</div>
</body>
</html>


Thank you in advance for any help that can be offered!!!...

_Aerospace_Eng_
Dec 4th, 2008, 07:35 AM
Get rid of overflow:hidden; on #container and change height:100% to min-height:100%. Add this to your CSS

* html #container { /* we only need to target IE6 so this is okay */
height:100%;
}

ShootingBlanks
Dec 4th, 2008, 02:59 PM
Get rid of overflow:hidden; on #container and change height:100% to min-height:100%. Add this to your CSS

* html #container { /* we only need to target IE6 so this is okay */
height:100%;
}

Thanks so much...that almost worked! The only thing left that is still a problem is that on IE7 and Firefox the black left/right border does not extend to the bottom of the page (so, basically, the #content div). On IE6 everything is fine...

Any ideas? Thanks again!!!...

abduraooft
Dec 4th, 2008, 04:05 PM
Try

#container {
background:#EC1D25 none repeat scroll 0%;
border-left:2px solid #000000;
border-right:2px solid #000000;
min-height:100%; /* to stretch the container to the 100% height of body*/
overflow:auto; /* to clear the floats see http://www.quirksmode.org/css/clearing.html */
margin:auto;
padding:0px;
text-align:left;
width:800px;
}

PS: you don't need to apply floats on both columns to make a 2-column layout, refer http://bonrouge.com/2c-hf-fixed.php

ShootingBlanks
Dec 4th, 2008, 04:10 PM
That did extend the borders, but it also put scrollbars onto the #container div (as opposed to on the main browser window itself), so that looks odd and won't work...

Thanks for the suggestion, though. Any other thoughts???...

abduraooft
Dec 4th, 2008, 04:19 PM
OK, just remove the overflow property and clear your floats in the old and reliable a style like

<div id="maincontent">
<p>SAMPLE TEXT</p>
</div>
<div style="clear:both;"></div>
Refer www.positioniseverything.net/easyclearing.html

ShootingBlanks
Dec 4th, 2008, 04:28 PM
Aren't I already doing that with my #spacer div in my original HTML?:

<div id="maincontent">
<p>SAMPLE TEXT</p>
</div>
<div id="spacer"></div>


If so, removing the "overflow" property didn't change anything. :confused:

abduraooft
Dec 4th, 2008, 04:31 PM
Please update your page with the suggestion so far. I don't see a min-height:100%; there. Follow what _Aero suggested above.

ShootingBlanks
Dec 4th, 2008, 04:46 PM
Please update your page with the suggestion so far. I don't see a min-height:100%; there. Follow what _Aero suggested above.

Original post and live test page online have been updated - thanks!

abduraooft
Dec 4th, 2008, 04:52 PM
#container {/*styles.css (line 29)*/
height:100%;
} No one said you to put that! Just remove it and check.

ShootingBlanks
Dec 4th, 2008, 05:01 PM
No one said you to put that! Just remove it and check.

D'oh! I must've had that leftover from some testing and messing around. Didn't even notice it! :rolleyes:

Everything looks great, but one last thing...

...only in Firefox, the text/links in the top nav section (in the black bar) is top-justified. It should be closer to the bottom (as indicated here):

#nav p {
margin-top: 30px;
}

Any ideas why this is fine in IE6/7, but not in Firefox (and how to fix)? Thanks!...
:)

abduraooft
Dec 4th, 2008, 05:14 PM
Adding a line-height to your div like

#nav {/*styles.css (line 39)*/
background-color:#000000;
color:#FFFFFF;
height:50px;
line-height:50px;
text-align:center;
width:100%;
} would fix it.

PS: To make a list of items, use <ul> or <ol>, which the semantic way.

ShootingBlanks
Dec 4th, 2008, 05:54 PM
Cool - thanks again for all the help! :)