g_r_i_d
asked on
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!
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>
Are you just looking for a vertical stretch? Or do you want horizontal as well?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
.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.
ASKER
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.
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>
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.
Yes, I admit this is merely visual trickery, but with modern web standards, this is how it works.
Sorry. I've actually read your reply. I'll have another look.
ASKER
For my example scenario, Jezcentral's initial solution works 100%
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. :(
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.