By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,868 Members | 1,991 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,868 IT Pros & Developers. It's quick & easy.

Help expanding elements to their containers' size (but with margin)

P: 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]
Jan 31 '08 #1
Share this Question
Share on Google+
1 Reply


harshmaul
Expert 100+
P: 490
Hi,

Sorry this is quite late, but i'm just diggin through some old threads...

Expand|Select|Wrap|Line Numbers
  1. .pod{
  2. height:95%;
  3. vertical-align:top;
  4. }
this css will make the "pods" heights fit the table almost fully.

the trick is to use percents, and make sure that the hieghts and padding adds up to 100. eg.. 5% padding top and bottom = 10% total. + 90% height = 100%.
Feb 11 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.