Expanding elements to their containers' size (but with margin)

Experts,

I would like to know if I could get some help with making elements of my layout expand (liquid) to the size of their containers, but also allow for some predefined, static margin/spacing. The layout is table-based, only because it needs to be very modular (going into more of an app than a website, and being reused) and needs to accommodate content of various sizes. Although I suppose i could mimic this with min-height styles on a div.

Below is my HTML + CSS code. As you can see it currently does not expand as I would like it to; I'd like to see the "pods" (tables of class "pod") expand to fill their containers. If I do set height/width: 100%, the "pods" will grow too large since their actual size will be greater than 100% including margins, in the standard box model. Also, just to be specific, I would like to keep the headers of the 'pods' to their static height if at all possible, and not let those be liquid, but only for their content (cell class "content") to expand.

Hopefully someone here has a solution I haven't thought of. I could resort to javascript since this doesn't really need to degrade, or my other idea is to introduce forced margins via blank images or some other element, but I really would like to avoid such a hack if possible. I am definitely open to a div-based solution as well.

Thanks in advance for anyone's help!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
    <title>fully-expanded tables</title>
    <style type="text/css">
        html {
            font-size: 100%;
            height: 100%;
            width: 100%;
        }
        
        body {
            margin: 0px;
            background-color: aqua;
            font-family: arial;
            font-size: 0.625em;
        }
        
        table#main, table#main td {
            padding: 0px;
            margin: 0px;
        }
        
        table#main {
            width: 100%;
            height: 100%;
        }
        
        td.column {
            width: 33%;
        }
        
        table.pod {
            padding: 0px;
            margin: 6px 3px 3px 3px;
            background-color: white;
            /*
            Here is where I would like to have 
            width and height expand to 100% apiece,
            but this will not work with margin
            */
        }
        
        .pod td.content {
            /*  Here I would also like things expanded */
        }
        
        div.header {
            text-align: center;
            font-size: 1.7em;
            height: 25px;
            color: white;
            background-color: green;
            padding: 3px;
        }
    </style>
</head>
 
<body>
<table id="main">
    <tr>
        <td class="column">
            <table class="pod">
                <tr>
                    <td><div class="header">TITLE 1</div></td>
                </tr>
                <tr>
                    <td class="content">
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse enim. Ut ultrices. Curabitur varius nisl vitae enim. Nullam vel dolor. Donec nibh. Integer varius ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque suscipit. Suspendisse pellentesque tincidunt ligula. Vestibulum bibendum mattis ligula. Quisque et lectus. Vestibulum adipiscing pretium tellus. Donec ut lacus eu nisl pulvinar imperdiet. Sed elit nibh.
                    </td>
                </tr>
            </table>
        </td>
        <td class="column">
            <table class="pod">
                <tr>
                    <td><div class="header">TITLE 2</div></td>
                </tr>
                <tr>
                    <td class="content">
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris nisl lorem, tincidunt id, ultricies at, consectetuer non, enim. Nam dolor. Maecenas vehicula congue ligula. Nam et quam. Maecenas et turpis.
                    </td>
                </tr>            
            </table>
        </td>
        <td class="column">
            <table class="pod">
                <tr>
                    <td><div class="header">TITLE 3</div></td>
                </tr>
                <tr>
                    <td class="content">
                        Lorem ipsum dolor sit amet.
                    </td>
                </tr>            
            </table>
        </td>        
    </tr>
</table>
 
</body>
</html>

Open in new window

g_r_i_dAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
JezcentralConnect With a Mentor Commented:
For a vertical stretch:

The best way is to take the margin out of the table.pod styles, and put it in td.column, and a background-color: #ffffff;. Then add:
td.column {
    vertical-align: top;
}
The table cells appear to stretch to same height. (They don't, but the containing table cell does, and that is what you use.
0
 
JezcentralCommented:
Are you just looking for a vertical stretch? Or do you want horizontal as well?
0
 
JezcentralCommented:
Sorry, I missed a style:
.pod td.content {
    vertical-align: top;
}
This will give you a same length stretch, but with some tidying up to do with the third column, but this is straightforward.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
g_r_i_dAuthor Commented:
Jezcentral,

Thanks so much for the reply.  I think you are onto something with the column styles, very cool that you can have 33% + 33% + 33% plus the margin.. thats really handy.  Unfortunately I am _almost_ there, but not quite.  My snippet was a bit oversimplified, and to get an idea of what I still need, I modified my code just a bit (basically a orange border around the pod tables).  The key is I actually need those tables to fill 100% of the height.  My code below actually works across every browser I tested except Internet Explorer 6, but I think IE may actually be right, in its interpretation of standards:  It won't accept height: 100% for a table.  Do you know of any workarounds for this?  I realize I could port that orange border to the "columns" to achieve the effect, but I dont think thats an option for me in my real application, since there are many styles and elements associated with the "pods" that I would like to keep associated with them and not with their containers, which will vary quite a bit.  The margin, however, is definitely portable so your solution works for that.

Thanks again and sorry for asking so much.  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
    <title>fully-expanded tables</title>
    <style type="text/css">
        html {
            font-size: 100%;
            height: 100%;
            width: 100%;
        }
        
        body {
            height: 100%;
            margin: 0px;
            background-color: aqua;
            font-family: arial;
            font-size: 0.625em;
        }
        
        table#main, table#main td {
            padding: 0px;
            margin: 0px;
        }
        
        table#main {
            width: 100%;
            height: 100%;
        }
        
        td.column {
            margin: 6px 3px 3px 3px;
            background-color: white;
            width: 33%;
            vertical-align: top;
        }
        
        table.pod {
            /* The height doesn't seem to 
            render as 100% in IE */
            height: 100%;
            width: 100%;
            border: 1px solid orange;
            padding: 0px;
        }
        
        .pod td.content {
            vertical-align: top;
            height: 100%;
        }
        
        div.header {
            text-align: center;
            font-size: 1.7em;
            height: 25px;
            color: white;
            background-color: green;
            padding: 3px;
        }
    </style>
</head>
 
<body>
<table id="main">
    <tr>
        <td class="column">
            <table class="pod">
                <tr>
                    <td><div class="header">TITLE 1</div></td>
                </tr>
                <tr>
                    <td class="content">
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse enim. Ut ultrices. Curabitur varius nisl vitae enim. Nullam vel dolor. Donec nibh. Integer varius ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque suscipit. Suspendisse pellentesque tincidunt ligula. Vestibulum bibendum mattis ligula. Quisque et lectus. Vestibulum adipiscing pretium tellus. Donec ut lacus eu nisl pulvinar imperdiet. Sed elit nibh.
                    </td>
                </tr>
            </table>
        </td>
        <td class="column">
            <table class="pod">
                <tr>
                    <td><div class="header">TITLE 2</div></td>
                </tr>
                <tr>
                    <td class="content">
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris nisl lorem, tincidunt id, ultricies at, consectetuer non, enim. Nam dolor. Maecenas vehicula congue ligula. Nam et quam. Maecenas et turpis.
                    </td>
                </tr>            
            </table>
        </td>
        <td class="column">
            <table class="pod">
                <tr>
                    <td><div class="header">TITLE 3</div></td>
                </tr>
                <tr>
                    <td class="content">
                        Lorem ipsum dolor sit amet.
                    </td>
                </tr>            
            </table>
        </td>        
    </tr>
</table>
 
</body>
</html>

Open in new window

0
 
JezcentralCommented:
Just move the border: 1px solid orange; to td.column. The trick here is the cells in table.pod do not stretch all the way to the bottom, but the table cell that contains them does. So style that instead!

Yes, I admit this is merely visual trickery, but with modern web standards, this is how it works.
0
 
JezcentralCommented:
Sorry. I've actually read your reply. I'll have another look.
0
 
g_r_i_dAuthor Commented:
For my example scenario, Jezcentral's initial solution works 100%
0
 
JezcentralCommented:
Cheers. I'm not sure why what you want to happen isn't happening! You just need to stretch the table to 100% length. They are inside a table which itself is stretched to 100% height, so it should work. :(
0
 
JezcentralCommented:
100% heights are very patchy though, I've found. If I ever have to code this sort of thing, I tend to go back to the designer and beat him around the head and shoulders until he changes is mind.
0
All Courses

From novice to tech pro — start learning today.