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> Link to comment https://forums.phpfreaks.com/topic/202404-making-tags-equal-height-based-on-content/ 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. Link to comment https://forums.phpfreaks.com/topic/202404-making-tags-equal-height-based-on-content/#findComment-1061466 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. Link to comment https://forums.phpfreaks.com/topic/202404-making-tags-equal-height-based-on-content/#findComment-1061608 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.