Forum Moderators: not2easy
I've used these forums for research for quite a while now, but this is my first post. I've read the posting rules, so I'll do my best to comply and explain my issue properly.
I'm working on a new site design that is completely based on CSS. (Trying to get up to date!) It's taken me a while to get this far, but with a lot of reading and experimenting, I've just about got it. Unfortunately, I'm at a wall now that I can't seem to get over. Hoping someone here can help...
My problem is that only some of my text is showing in my content area. The rest appears to be covered by the footer, but the page won't scroll down further. How can I get the rest of the text/content to display?
I'm using doctype HTML 4.01 Transitional.
CSS:
div#wrapper
{
width: 766px;
height: 100%;/* for IE */
overflow: hidden;
background-color: #FFFFFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
padding: 0px;
}
div#main_content {
float: right;
width: 518px;
}
div#main_block {
padding: 15px 10px 10px 20px;
}
div#footer_container
{
width: 766px;
height: 49px;
overflow: hidden;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
}
div#footer_left
{
float: left;
width: 26px;
height: 100%;
background-image: url("../images/side_filler.jpg");
background-position: top left;
background-repeat: repeat-y;
}
div#footer_center
{
float: left;
width: 714px;
text-align: center;
background-image: url("../images/footer_bg.jpg");
background-position: bottom left;
background-repeat: repeat-x;
}
div#footer_right
{
float: right;
width: 25px;
height: 100%;
text-align: right;
background-image: url("../images/side_filler.jpg");
background-position: top right;
background-repeat: repeat-y;
}
HTML:
<div id="wrapper">
<div id="main_content">
<div id="main_block">
<p>Content here - this part shows up fine.</p>
<p>...</p>
<p>Once I get down the page a bit so it's longer and needs to scroll, the extra text is hidden.</p>
</div>
</div>
</div>
<div id="footer_container">
<div id="footer_left"></div>
<div id="footer_center">copyright</div>
<div id="footer_right"></div>
</div>
Hopefully I've included everything necessary to solve this. I included footer info just in case it's needed. I'd really apprecaite any assistance/advice you can offer. Thanks!
- Jason
In numerous parts of your code, you use height:100%.
For this to work properly, you must set the height of your html and body to 100% as well, to establish a base:
html, body{height:100%}
If you want an object 100% height of it's container, you must define it as a "containing block", a special term used by the W3C which you can search about. Basicly, you need to set position:relative (and no offset necessary) to establish this, so that height:100% won't take up 100% of the screen instead.
You also have overflow:hidden in your #wrapper, which seems kind of strange to me. You may want to get rid of that unless it's definately fixing a problem.
Web browsers - I'm using FF 1.5 and IE6.
I had added "height: 100%" to the html and body tags before, thinking just as you sugested, but it didn't make any difference. I just tried it again now to make sure. No change.
To what block should I add "position:relative"? I tried adding it to #main_content and #main_block, but nothing happened.
I removed the overflow from my wrapper tag. It didn't change anything, so I guess it wasn't needed. Thanks.
I guess I didn't save my css file when I took out the overflow! When I saved it, IE is displaying correctly, but now in Firefox my footer has been pushed way over to the side. I added a thin border to my #wrapper to see what was happening, and it shows my text is spilling down beyond my wrapper, pushing my footer out of the way. So how would I fix this?
I tried it with and without the body and html set to 100%. I also tried adding position:relative to my wrapper. No change.
Thanks for your help. I'm getting closer!
Footer is now lining up properly in FF.
Spotting that overflow in my wrapper lead to my solution. Thanks so much!
