Hey all.

I'm having a bit of a problem with a site I'm working on.

On the site, I have some pages with not a lot of content. For example,

http://www.dbpnyc.gamerx5000.com/vidhome.html

You'll notice that the background image that I use, click to see the actual image, just goes down to the bottom of the footer. Not to the bottom of the browser.

So basically, I'd like it to look like this. <----*please note that that is photoshopped to show you what I want it to look like*

If this is extremely simple, forgive me. I'm still pretty new to this, and I looked for tutorials on google, and came up with nothing.

So yeah, if someone can give me a hand, I'd really appreciate it. If you need more information, please ask and I will answer.

Thank you for your time!

You mean the content box itself and the menu on the side?
Try using this tutorial on CSS vertical stretch: Clicky

You can basicly accomplish anything with CSS, atleast what you need for positioning and styling ofcourse. Don't know if you are using it at the moment, but consider looking into that tutorial and others. Since I'm not that great in it myself, I'm not tgoing to say anything about it on how to do i.

Hope this helped?

Liqfan,

Thank you. You've solved my problem.

The tutorial was right. I just had to add this:



I'll be sure to remember that for the future. Thank you again.

Glad I could help, and it seems it is indeed working judging on your website now ^^

Okay, for some reason, it's decided not to work in IE 7 now. It was working earlier today, but now on the long pages, it cuts off where the browser ends on the page, and if you scroll down, the image just completely stops at where the bottom of the browser was.

http://i38.tinypic.com/2u5f8sz.jpg
^ screenshot of the problem on the home page.

This is the LAST problem I have.

I tried reading more of that tutorial, but that didn't seem to work.

If you need to look at my css, here it is.

http://www.dbpnyc.gamerx5000.com/style.css

ok after analyzing your code, i found out how to make it work. on your css, change to:



or you could put:



on every page, so replace the <div id="bottom"> tag with the above tag.

also, on your original css on the left id, you have width:746px; and i would recommend spacing the value after width.. so like, width: 746px... with space in between... some browsers do not understand the value if there is no space..

-Lucas

L. Kaiserblazer,

Thanks for your code. However, it did not fix the problem. All it did was moved "bottom" back to where it was suppose to be, and moved the text right up against the edge of "bottom". But I left the margin at 0, and added a padding of 5px all around and lowered the width back down to 746px.

I did also fixed the whole :#px as opposed to : #px thing. Thank you for that tip. I will keep that in mind for future projects (and I changed that for this to. ).

What I'm trying to do is take this image that is currently repeating in the css in "body" (but I also have it repeating in "html, body"). When I add "height: 100%" to "html, body" in the css, for small pages, it will work just fine. But for big pages, it screws up the bottom (like this). HOWEVER, if I leave out the "height: 100%" out of "html, body" in the css, the bottom of the big pages work, but the image will not expand to the bottom of the browser (like this). It's almost like I have to choose between one or the other... but I shouldn't have to.

This seems to be the case will all browsers.

I'm sorry if I'm repeating myself, I'm just trying to be as clear as possible.

So yeah, here's my css:

http://dbpnyc.gamerx5000.com/style.css

and the site:

http://dbpnyc.gamerx5000.com/index.html

Currently I have it so that way long pages work, but the image will not go to the bottom of the browser on short pages.

Again, thank you all for your help.

If it'll be faster, please feel free to message me on AIM. My screen name is in my profile.

It looks like you have solved the problem?
I dont' see anything odd with either FF3, IE6 and IE7

Look on the "Video" page. You'll see that the background image, this image, does not go to the bottom of the browser.

I'm trying to make it look like this (this was photoshopped).

Oh.. I am REALLY sorry about the misunderstanding.. it seems i did not understand what u were asking for.. to fix your problem, simply replace 'height: auto;' in your css with 'min-height: 746px' (or whatever number of pixels you will need)... this will allow for the page to be with a minimum height of 746px but it can go longer.. hope that helped, though understand that most versions of IE, like 5 or 6, cannot read this code... it is a newer code... tell me if it helped...

-Lucas