Jump to content

Three Column Layout. Adjustable Height.


sepoto
 Share

Recommended Posts

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

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> 

Edited by dsonesuk
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...