michaellunsford Posted July 13, 2007 Share Posted July 13, 2007 The following page displays just fine, so long as the text doesn't go past the bottom of the viewable part of the page. Once there's enough text to stretch beyond the viewable page, scrolling reveals the background had disappeared. I've tried height:100% and min-height:100% without affect. Any ideas? <!doctype... <html> <head> <style type="text/css"> body,html { height:100%; } #main_content { height:100%; width:800px; background:url(images/bgimage.gif) repeat-y; margin:auto; } #left_column { height:100%; width:200px; float:left; } #right_column { height:100%; width:600px; float:right; } </style> </head> <body> <div id="main_content"> <div id="left_column"></div> <div id="right_column">Lorem Ipsum</div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
RichardRotterdam Posted July 13, 2007 Share Posted July 13, 2007 here you go buddy no need to set the height I just use the clear break check out the css and <br class="clear" /> to see what i mean <html> <head> <style type="text/css"> body,html { } #main_content { width:800px; background:url(images/bgimage.gif) repeat-y; margin:auto; } #left_column { width:200px; float:left; } #right_column { width:600px; float:right; } br.clear{ clear:both; } </style> </head> <body> <div id="main_content"> <div id="left_column"></div> <div id="right_column">Lorem Ipsum</div> <br class="clear" /> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
michaellunsford Posted July 14, 2007 Author Share Posted July 14, 2007 It really didn't help, but I figured out a different way to do it. Basically, I applied the a centered background to the html body. The other divs were not moved. The background repeated properly across the entire page, regardless of div containers, so all works fine now. Thanks for the attention. <!doctype... <html> <head> <style type="text/css"> body,html { height:100%; margin:0; background:url(images/bgimage.gif) repeat-y top center; } #main_content { height:100%; width:800px; margin:auto; } #left_column { height:100%; width:200px; float:left; } #right_column { height:100%; width:600px; float:right; } </style> </head> <body> <div id="main_content"> <div id="left_column"></div> <div id="right_column">Lorem Ipsum</div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.