sepoto Posted October 7, 2011 Share Posted October 7, 2011 I am really struggling badly with this layout. I need the height of wrapper to adjust automatically to the height of the largest column of my three column layout. Wrapper has a border applied to it. For some reason I can not get it to function properly at all. Thanks in advance. <html><head><title>Three Column Layout</title><style>* { margin: 0px; }body { background-color: black; text-align: center; height: 100%; }#wrapper { border: 1px solid white; min-height: 100%; width: 800px; margin: 0 auto; color: white; text-align: left; padding: 0px; height: auto !important; height: 100%;} #leftbar { float: left; width: 120px; height: auto;}#centerbar { float: left; width: 120px; height: auto; }#rightbar { float: left; width: 120px; height: auto; } </style></head><body><div id="wrapper"> <div id="content"> <div id="leftbar"><script type="text/javascript"><!--google_ad_client = "ca-pub-7320713953525345";/* DSG - Basic - Left Sidebar (1) */google_ad_slot = "5592477227";google_ad_width = 120;google_ad_height = 600;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></br><script type="text/javascript"><!--google_ad_client = "ca-pub-7320713953525345";/* DSG - 120x600 2 */google_ad_slot = "6955858474";google_ad_width = 120;google_ad_height = 600;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></div><!-- #left-bar --> <div id="centerbar"></div><div id="rightbar"></div> </div><!-- #content --></div><!-- #wrapper --><div id="footer"> </div> </body> Link to comment Share on other sites More sharing options...
dsonesuk Posted October 7, 2011 Share Posted October 7, 2011 The problem is that you have not defined a !doctype, and the wrapper needs overflow: hidden; to surround the floated elements. <!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"><head><title>Three Column Layout</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">* { margin: 0px; }body { background-color: black; text-align: center; height: 100%; }#wrapper { border: 1px solid white; min-height: 100%; width: 800px; margin: 0 auto; color: white; text-align: left; padding: 0px; height: auto !important; height: 100%; overflow:hidden;} #leftbar { float: left; width: 120px; height: auto;}#centerbar { float: left; width: 120px; height: auto; }#rightbar { float: left; width: 120px; height: auto; } </style></head><body><div id="wrapper"> <div id="content"> <div id="leftbar"><script type="text/javascript"><!--google_ad_client = "ca-pub-7320713953525345";/* DSG - Basic - Left Sidebar (1) */google_ad_slot = "5592477227";google_ad_width = 120;google_ad_height = 600;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script><br/><script type="text/javascript"><!--google_ad_client = "ca-pub-7320713953525345";/* DSG - 120x600 2 */google_ad_slot = "6955858474";google_ad_width = 120;google_ad_height = 600;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></div><!-- #left-bar --> <div id="centerbar"></div><div id="rightbar"></div> </div><!-- #content --></div><!-- #wrapper --><div id="footer"> </div></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.