RIRedinPA Posted May 20, 2010 Share Posted May 20, 2010 I'm trying to lay out a grid/table using ul/li/p tags and am running into a problem when one of the cells has a lot of content in it, it's height will obviously be taller than the adjacent ones... is there a means through CSS where I can get all the <p> tags to be the same height as the one with the most content or do I have to do some Javascript ju jitsu? Here's an example of it not working... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Line Height Test</title> <!--CSS Link--> <style> #tablebox { height: 400px; border: 1px solid black; } #tablebox ul { list-style-type: none; } #tablebox li { } #tablebox p { background-color: #eee; border: 1px solid blue; float: left; padding: 5px; } #tablebox p.content { width: 100px; } </style> </head> <body> <div id="tablebox"> <ul> <li> <p>Item 1</p> <p>Item 2</p> <p class="content">This is a lot of text that will wrap and needs to force the other cells to be this height.</p> <p>Item 3</p> </li> </ul> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
haku Posted May 21, 2010 Share Posted May 21, 2010 You need javascript to do this. CSS is not aware of content in other elements. Quote Link to comment Share on other sites More sharing options...
RIRedinPA Posted May 21, 2010 Author Share Posted May 21, 2010 You need javascript to do this. CSS is not aware of content in other elements. Figured as much. Thanks. 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.