...

View Full Version : Making DIV 100% strech on Body



UrbanTwitch
03-08-2009, 06:40 AM
Hello, I'm trying to make it so the Div (inner-wrap) goes all the way down to the footer.
Go here: http://rsguard.com/weka

As you can see, it only goes up until where the content stops. I want it to go down all the way. How do I go about doing this?

CSS: http://rsguard.com/weka/style.css

Best Regards,
MysticScript

Camron467
03-08-2009, 07:03 AM
Try this:

add this to your css


body {
margin:0;
padding:0;
height:100%;
}

add height: 100% to the div you want 100%...thats what I do.

UrbanTwitch
03-08-2009, 07:26 AM
I already have it.

Excavator
03-08-2009, 08:21 AM
Hello MysticScript,
Your link is dead for me... I'll check back in a bit and see if it comes up.

For now, have a look at a demo of a full height layout at http://nopeople.com/CSS/full-height-layout/index.html

UrbanTwitch
03-08-2009, 08:34 AM
Eek, sorry! OK, I fixed the link. Check the first post again. I will check the link you've provided me with and I'll get back to you. ;-)

Excavator
03-08-2009, 09:02 AM
It's back up now.
That full-height solution will work well for you. You might also want to look into using faux columns (http://www.alistapart.com/articles/fauxcolumns/)so your both columns will be full height.

UrbanTwitch
03-08-2009, 09:25 AM
Argh, I tried to get it to work. No luck.

Can you please check the CSS to see what I am doing wrong? (I updated the html and css)

Excavator
03-08-2009, 09:42 AM
It's not as complicated as it looks but everyone seems to have a hard time incorporating it into their site.
The best way is to copy my code and CSS, strip it down to the bare bones and start pasting your code into it. Check that it's working every time you paste something in there... check with the validator often too. (see the links in my sig about validting)

The most important parts of that code that makes it work is

html and body are height:100%;
main container has a negative margin for the height of the footer
the push inside the main container
the footer OUTSIDE of the main container


It doesn't work well with nested divs. The main container is the full-height one but nothing else is.

UrbanTwitch
03-08-2009, 09:55 AM
I'm trying to make it so the header,menu below the header, and footer stretch full way. Everything else contained in width of 790px. I'll see what I can do.

Update: GENIUS!
It works: http://rsguard.com/weka/

I have tested in FireFox 3, IE, and Chrome. They work great. If only I had mac browsers. Meh.

Also, I tried short content and lots of content and it works accordingly.
Thanks so much!
------
the only downside.. I can't figure out how to add images to the like the left or right shadow on each sides of the white div

Excavator
03-08-2009, 11:54 AM
the only downside.. I can't figure out how to add images to the like the left or right shadow on each sides of the white div

Faux columns (http://www.alistapart.com/articles/fauxcolumns/) and the right image can work wonders.


It's looking good so far. The #push will work fine there as long as the right column isn't ever the long one. There are some things the validator finds that need fixed - http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Frsguard.com%2Fweka%2F

UrbanTwitch
03-08-2009, 10:08 PM
To be honest, I read through the Faux article.. I did not get it one bit. :\

Excavator
03-08-2009, 10:39 PM
See if this shows it better. I just put this up, I've been wanting to make something with an absolute basic explanation.
http://nopeople.com/CSS/faux_columns/index.html

RedMatrix
03-09-2009, 02:50 AM
I just put this up, I've been wanting to make something with an absolute basic explanation.
http://nopeople.com/CSS/faux_columns/index.html

Your example is very succinct! Thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum