Here is a layout I am working on. If you scroll to the bottom, you can see that the background of #content isn't going to the end of the page. What I have is #content to get the background, but then I have #main which has the actual writing in it. I did that because the background had a drop shadow and I didn't want the writing to go over that, plus I intend to put a sidebar in. It doesn't working so well though with the #content not going all the way to the bottom. Anyone know how to help this? I tried a few things I saw around the web like height:100%; and min-height:100%; and playing with the z-index but nothing really worked.
Any ideas would be appreciated. The simpler the solution the better but if there's some major readjusting of things, I can give that a try, too. First layout I got that looks halfway decent, I'd like to be able to use it. ):
Full Version: Div to fill entire page?
Well, one thing I would recommend not using absolute positioning as much as you can, it can make things really complicated really fast.
Otherwise, I fixed the issue with this simple edit in Firebug.
You should put the content inside of the div with the background. To prevent the content from going over the drop shadow of the background image, simply use padding. This would solve some complications your absolute positioning would cause later on and make it easier to add more expanding content.
Also you should really put the CSS styles in a seperate .css file and link to it in the header of the HTML, not embedding it in the document itself. Not only is it good practice for organizing, but it actually is proven to be more efficient for page loading and such.
Otherwise, I fixed the issue with this simple edit in Firebug.
CODE
#content {
background-image:url(/images/contentbg.png);
height:100%; <-- Delete this line
left:92px;
position:absolute;
top:280px;
width:722px;
}
background-image:url(/images/contentbg.png);
height:100%; <-- Delete this line
left:92px;
position:absolute;
top:280px;
width:722px;
}
You should put the content inside of the div with the background. To prevent the content from going over the drop shadow of the background image, simply use padding. This would solve some complications your absolute positioning would cause later on and make it easier to add more expanding content.
Also you should really put the CSS styles in a seperate .css file and link to it in the header of the HTML, not embedding it in the document itself. Not only is it good practice for organizing, but it actually is proven to be more efficient for page loading and such.
QUOTE (Demonslay @ Oct 29 2009, 11:05 PM) 
Well, one thing I would recommend not using absolute positioning as much as you can, it can make things really complicated really fast.
Otherwise, I fixed the issue with this simple edit in Firebug.
You should put the content inside of the div with the background. To prevent the content from going over the drop shadow of the background image, simply use padding. This would solve some complications your absolute positioning would cause later on and make it easier to add more expanding content.
Also you should really put the CSS styles in a seperate .css file and link to it in the header of the HTML, not embedding it in the document itself. Not only is it good practice for organizing, but it actually is proven to be more efficient for page loading and such.
Otherwise, I fixed the issue with this simple edit in Firebug.
CODE
#content {
background-image:url(/images/contentbg.png);
height:100%; <-- Delete this line
left:92px;
position:absolute;
top:280px;
width:722px;
}
background-image:url(/images/contentbg.png);
height:100%; <-- Delete this line
left:92px;
position:absolute;
top:280px;
width:722px;
}
You should put the content inside of the div with the background. To prevent the content from going over the drop shadow of the background image, simply use padding. This would solve some complications your absolute positioning would cause later on and make it easier to add more expanding content.
Also you should really put the CSS styles in a seperate .css file and link to it in the header of the HTML, not embedding it in the document itself. Not only is it good practice for organizing, but it actually is proven to be more efficient for page loading and such.
I tried the padding thing, but it doesn't seem to work in Firefox.
EDIT: Oh, I know. I usually do have it in a .css file when I make the layout live. Just, when I'm working on building the layout, I find it easier to keep it on one page so I don't have to keep jumping back and forth.
I noticed you did some changes to the live page.
Try this style, it works fine for me in Firefox 3.5.3.
I adjusted your width, it should be the width of what you want minus your paddings, since the total width is calculated with paddings. I also changed the repeat of the background image as good practice, so it isn't technically repeating in all directions, wasting that small bit of calculating... just in-case the container stretched horizontally or something.
Try this style, it works fine for me in Firefox 3.5.3.
CODE
#content {
background:url(/images/contentbg.png) repeat-y;
left:92px;
padding:16px;
position:absolute;
top:280px;
width:690px;
}
background:url(/images/contentbg.png) repeat-y;
left:92px;
padding:16px;
position:absolute;
top:280px;
width:690px;
}
I adjusted your width, it should be the width of what you want minus your paddings, since the total width is calculated with paddings. I also changed the repeat of the background image as good practice, so it isn't technically repeating in all directions, wasting that small bit of calculating... just in-case the container stretched horizontally or something.
Right, not it works in FF... but not IE. xD
EDIT: Nevermind! Solved it with an 'if IE' command. Thanks a million!
EDIT: Nevermind! Solved it with an 'if IE' command. Thanks a million!
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.