Hi, I've got a problem with text overflowing a div on a test layout that I'm developing. I've stripped the layout down to its bare bones so I'm guessing that its not going to work in all browsers ... I just want to get it right in one first Check out Test Layout. The problem is the text in the main div is overflowing and I'm loosing the footer div as well. If you don't see the problem then try and resize the browser window. The problem as I see it, is that the bottom (grass) image is obliterating the the DIVs, but I don't understand why I can still see the text though? Any ideas would be extremely welcome!. Thanks in advance gG
#main { background: transparent url(sand01.jpg); } Change to #main { background: transparent url(sand01.jpg); height:000px } Try doing something like that but replace the 000's with the height of the sand image.
Oh I see what you are talking about now. Try making them into blocks by adding display:block, because otherwise they will just overlap one another.
here you go <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My Page</title> <style type="text/css"> /* commented backslash hack \*/ html, body{height:100%;} /* end hack */ * html #page { height:100%; } * { margin:0; border:0; padding:0; } body { background: #E7E7E7 url(http://www.creategraphics.co.uk/fw/fw-bk.jpg) repeat-x; text-align: center; font-family:"Trebuchet MS", Tahoma; font-size:14pt; color: #000000;margin:0px; } #wrapper { text-align:left; margin: 0px auto; background: transparent url(http://www.creategraphics.co.uk/fw/fw-pgbk.jpg) repeat-x; width: 1200px; padding-top: 20px; margin: 0px auto 0 auto; } #content { background: transparent url(http://www.creategraphics.co.uk/fw/fw-cobk.png) repeat-y; width:900px; margin:0 auto 0 auto; } #body { margin:0 10px 0 10px; } #header { background: transparent url(http://www.creategraphics.co.uk/fw/fw-hdbk.png) no-repeat top; height:50px; } #welcome { height:200px; background-color:#eeFeee; } #main { background: transparent url(http://www.creategraphics.co.uk/fw/sand01.jpg) repeat; } #footer { background: transparent url(http://www.creategraphics.co.uk/fw/fw-ftbk.png) no-repeat bottom; clear:both; } #bottom { background: transparent url(http://www.creategraphics.co.uk/fw/grass2.jpg) repeat-x bottom scroll; height:200px; width: 100%; clear:both; } </style> </head> <body> <div id="wrapper"> <div id="content"> <div id="body"> <div id="header"><p>this is the header</p></div> <div id="welcome"> <p>this is the welcome bar</p> </div> <div id="main"> <p>this is the body</p> <p>this is the body</p> <p>this is the body</p> <p>this is the body</p> <p>this is the body</p> <p>this is the body</p> <p>this is the body</p> <p>this is the body</p> <p>this is the body</p> <p>this is the body</p> <p>this is the body</p> <p>this is the body</p> <p>this is the body</p> <p>this is the body</p> <p>this is the body</p> <p>this is the body</p> <p>this is the body</p> <p>this is the body</p> <p>this is the body ... last one!</p> </div> <div id="footer">this is the footer</div> </div> </div> </div> <div id="bottom"></div> </body> </html> Code (markup):
Hey 4play!!!!!!! Thanks Not worked out what you changed yet, but that seems to have done the trick! Thanks again! gG
I've tested the solution provided but when the text in the main part of the page is just a few lines the 'grass' div creeps up the page. Any ideas? Thanks in advance gG