Adding to the end of the body

[Totoquil]

I want to add this image to the end of the body of my site: http://pokemondarkaura.netne.net/images/layoutbottom.pngHere's the site: http://pokemondarkaura.netne.net/testpage.htmHere's the CSS: http://pokemondarkaura.netne.net/layout.cssWhat I want is the image to be at the bottom of the site connected to the end of the body.

[Fmdpa]

background-position:center bottom;

[ilyakar]

what you want to do is simple. add a div below the content and tell the css to add the background image in the div. thats how all my sites do it.<div id="content"></div><div id="content_bottom"></div>

[dsonesuk]

because your site uses positioning, mainly absolute these elements occupy no space! you position them where you require, and they are fixed, you can't just add a div container below them you have to set the top, bottom, left, right properties of that container to physically position it underneath the others, its not fluid either the height is set, so it won't adjust to content, and force the bottom container down with it, that's why you should avoid using position unless in some rare circumstance you require it, THIS is not one of them.

[Totoquil]

because your site uses positioning, mainly absolute these elements occupy no space! you position them where you require, and they are fixed, you can't just add a div container below them you have to set the top, bottom, left, right properties of that container to physically position it underneath the others, its not fluid either the height is set, so it won't adjust to content, and force the bottom container down with it, that's why you should avoid using position unless in some rare circumstance you require it, THIS is not one of them.

I re-did the CSS: http://pokemondarkaura.netne.net/testcssI also tested it with my shortest page and got this result: http://pokemondarkaura.netne.net/testpage.htmI only used position: absolute on the left and right menus because they would move with the content.The only problem is I can't get the the disclaimer in the actual spot for it. >.> I took out the code that I tried to use to do it because it didn't work.EDIT: I fixed it temporarily by using <br /> in the actual document, but it's kind of awkward having it like that.

[dsonesuk]

remove banner, or just comment it out, move all of the right container above the content container, add wrapper container around all other container, and you should end up with layout like this<div id="wrapper"><!--<div id="banner"> </div>--><div id="leftmenu"> ...</div><!-- END leftmenu --><div id="rightmenu">...</div><!-- END rightmenu --><div id="content">....</div><!-- END content --> <div id="disclaimer">....</div><!-- END disclaimer --></div><!-- END wrapper --> and with this use css below

body{margin:0;font-family: Comic Sans, Comic Sans MS, cursive;font-size: 12px;background-color: #5A5D60;background-image: url('/images/layoutmiddle.png');background-position: center center;text-align: justify;}h1, h2, h3, h4, h5, h6 {color: #1D63B8; letter-spacing: 1px;font-weight: bold; text-align: center;}h1{font-size: 14px; width: 160px; border-bottom: 1px dotted #596573;}h2{font-size: 20px; }h3{font-size: 12px; border-bottom: 1px dotted #596573;}h4{font-size: 20px; border-bottom: 1px dotted #596573;}a:link, a:visited, a:active{ text-decoration: none; color: #E4DB32; }a:hover { text-decoration: none; color: #414299; }#wrapper{margin: 0 auto; width:1000px; background:url(/images/layouttop.png) no-repeat; overflow:hidden;}#leftmenu{float:left;margin-top:210px;text-align:center;width:170px;}#rightmenu{float:right;margin-top:210px;text-align: center;width: 170px; }#content{margin-left:210px;margin-right:210px;margin-top:450px;}#disclaimer{text-align: center;height: 200px;width: 100%;background:transparent url(/images/layoutbottom.png) no-repeat scroll 0;clear:both;}

[Totoquil]

Thanks! That's amazing! But there just one tiny thing. The menus are off by a little bit. Is there a way you can move them? I tried using margin-left and margin-right, but that didn't help.

[dsonesuk]

The left and right menus should be the same width as the width from the left to right edge of the rounded image above it, with word 'navigate' in it, to be truly centred (about 190px).

[Totoquil]

Thanks, that layout has been driving me crazy for weeks. I'm finally done with it!