There are several ways to accomplish this. I suggest Googling 'faux columns' CSS. The other way is via JavaScript.
M On Apr 12, 2010 9:17 PM, "CDF" <[email protected]> wrote: Can CSS be used instead of tables to make column A's background extend with column B when column B is longer than column A and visa versa? I can't seem to get this to work without the use of tables. Here's an example of A not extending when B is longer. I want them to always be the same height when the other grows. I can achieve this with tables but want to try building my site with only CSS. Can it be done? Example: <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> body { font-family:arial,helvetica,sans-serif; font-size:30px; } #wrapper { width:900px; margin:0px auto; border:1px solid #bbb; padding:10px; } #header { border:1px solid #bbb; height:80px; padding:10px; } #content { margin-top:10px; padding-bottom:10px; } #content div { padding:10px; border:1px solid #bbb; float:left; } #content-left { width:180px; background-color: #FF0000; } #content-main { margin-left:10px; width:665px; background-color:#00FF00; } #footer { float:left; margin-top:10px; margin-bottom:10px; padding:10px; border:1px solid #bbb; width:877px; } #bottom { clear:both; text-align:right; } </style> </head> <body> <div id="wrapper"> <div id="header">Header</div> <div id="content"> <div id="content-left">lkjd dlkj dkl dlkjlasdkl lkelk udilkjd </div> <div id="content-main">lkjd dlkj dkl dlkjlasdkl lkelk udilkjd lkjd dlkj dkl dlkjlasdkl lkelk udilkjd lkjd dlkj dkl dlkjlasdkl lkelk udilkjd lkjd dlkj dkl dlkjlasdkl lkelk udilkjd lkjd dlkj dkl dlkjlasdkl lkelk udilkjd lkjd dlkj dkl </div> </div> <div id="footer"></div> <div id="bottom"></div> </div> </body> -- -- You received this because you are subscribed to the "Design the Web with CSS" at Google groups. To post: [email protected] To unsubscribe: [email protected] To unsubscribe, reply using "remove me" as the subject. -- -- You received this because you are subscribed to the "Design the Web with CSS" at Google groups. To post: [email protected] To unsubscribe: [email protected]
