3
thescripts gurus,
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!
[HTML]<!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 or padding
*/
}
.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>[/HTML]
