473,230 Members | 1,555 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,230 software developers and data experts.

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

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
1 2042
harshmaul
490 Expert 256MB
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

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

Similar topics

14
by: Jinjun Xu | last post by:
Hi, I have an array and I want to adjust the size (remove some elements). I use the following code. Can you help me to check whether it's correct. ////////////// start int *p1 = new int; ...
1
by: danxavier | last post by:
I successfuly installed dd.php and sajax.php files. It runs fine, but I would like to link the $items to an image. I called the field in mysql with the link "pic". Any help would be AWESOME!!! I've...
7
by: webgyrl | last post by:
Hi, I am helping a musician friend of mine with his profile and I found a cool layout on Nas' MySpace page. I changed some things and re-did the graphics and I basically popped my Image URLS...
3
by: charchap | last post by:
hello. I'm experiencing problems with my css code (once again) working with Firefox and not working with IE 6 or 7 I have a problem with my head_logo_inner not too sure what's going on . Here is...
18
by: Diogenes | last post by:
Hi All; I, like others, have been frustrated with designing forms that look and flow the same in both IE and Firefox. They simply did not scale the same. I have discovered, to my chagrin,...
1
by: Miked | last post by:
Hello: I'm relatively new to CSS, and I'm doing a site where I don't want to use any tables. I've gotten pretty far, and the site has the layout I want. My only problem is that I'm using the...
1
by: kidelectric | last post by:
The issue I am having is that I would like to be able to drag-and-drop div elements that have rounded corners.* Since these elements will be dynamically created (including background color), I could...
0
by: magicofureyes | last post by:
Hello Guys im a just a new user and i dnt knw much abt Xml i want to upload a new template in Blogger so got some free coding but when i save this code in Blogger template it say '''' Your...
1
by: jeddiki | last post by:
Hello, I have made a nice opt-in form and tested it in Moz FF and it looks fine. But in IE the elements don't line up properly. I think I am nearly there but can not get these elements...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.