skaterdav85 Posted January 6, 2010 Share Posted January 6, 2010 How do I make the height of the right sidebar (#right) equal to the height of #left, without assigning a fixed height to both? I dont want to assign a fixed height because the content in #left is dynamic coming from a database, so the height will vary. <html> <head> <style type="text/css"> div, p, ul, li {margin:0; padding:0;} #main {border:1px solid black; width:700px;} #header {background-color:green;} #right {background-color:aqua; float:right; width:70%;} #left {background-color:#aaa; width:30%;} #footer {background-color:fuchsia; clear:both;} </style> </head> <body> <div id="main"> <div id="header">header here</div> <div id="right">right sidebar</div> <div id="left"> <p>left main</p> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> </div> <div id="footer">footer here</div> </div> </body></html> Link to comment Share on other sites More sharing options...
jeffman Posted January 7, 2010 Share Posted January 7, 2010 This is one of the weaknesses of CSS. It can't really be done. Here's a good trick that could work for your situation:Have both columns in a container div. The container div will grow with the longer column. Make the container div the color you want the dependent column to be. That way, even though the dependent column doesn't actually grow, it looks like it does.So in this case, it looks like "main" doesn't have any background-color of its own, because I presume all the other divs completely fill it. So if you assign "main" the same color as the right sidebar (aqua), it it will look like it's the background of "right".Since you have floated the columns, this whole thing will only work as long as you keep that footer div, with its clear:both property. Otherwise, the height of "main" won't adjust correctly. Link to comment Share on other sites More sharing options...
skaterdav85 Posted January 7, 2010 Author Share Posted January 7, 2010 Thanks for the trick tips DD. I think I'll go with the first one, since it seems easier. I wonder if CSS3 will fix this weakness Link to comment Share on other sites More sharing options...
jeffman Posted January 7, 2010 Share Posted January 7, 2010 Going on this, I'm not hopeful. http://www.w3.org/TR/2006/WD-css3-values-20060919/#calc The calc() function will address other problems, and that's good. But I've seen nothing that lets you grab a dynamic value from another element. There isn't even a syntax for referring to another element. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.