Hi all, I need some help with my design. I want to display three equal-height boxes next to eachother, like this ASCI art:
+------+ +------+ +------+ | | | | | | | | | | | | | | | | | | +------+ +------+ +------+ I also have an example online (with all the CSS) at: http://www.jejik.com/sander/temp/boxes/boxes.html The contents of the boxes varies in height. The tricky thing is that these boxes also need to have rounded corners. For that I am using the "sliding doors" technique. Basically, the markup of a box is something like this: <div class="box"> <div class="box-header"> <h4>header</h4> </div> <div class="box-body"> <p>Contents</p> </div> </div> Four block elements so I can make rounded corners and borders with background images. The top-right corner goes on the h4. The top left corner goes on the box-header. The bottom-right corner goes on the outer box div and the bottom-left corner goes on the box-body. I am using CSS display:table-cell to make all three boxes of equal height, but here my problem starts. All the box elements are now of equal height, but the box-body elements are not of equal height because the contents are not of equal height. Result: The bottom-right corners are not in the correct position. See also the link I posted. How can I fix that? All the box divs are equal in height now. I would like box-body to expand to use all available height, even when the content is short. I tried height:100% but that doesn't work. How can I make that work? Or is there an alternative way to achieve what I want? I cannot use something like faux-columns because I define the width of the boxes in ems. That means I cannot give the box div a single background image that provides both bottom corners. Google is being absolutely useless here. Any query involving "corners" and "table" just gives me a gazillion links to 1990's tutorials that use a 3x3 table for rounded corners. Any tips are greatly appreciated! Kind regards, -- Sander Marechal ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
