[RESOLVED] help framing a table with 4 divs [Archive]

Click to See Complete Forum and Search --> : [RESOLVED] help framing a table with 4 divs

Angry Black Man

02-15-2009, 01:54 AM

okay, im licked. ive been trying to get a table to sit in the center of 4 divs that "frame" it.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body style="height: 100%">

<div id="outside" style="border: 1px dashed black; width: 95%; background-color: gray; margin-left: auto; margin-right: auto;">
<div id="top" style="border: 1px solid yellow; background-color: red; height: 5px;"></div>
<div id="left" style="border: 1px solid orange; background-color: red; width: 5px; height: 100% float: left"></div>
<div id="right" style="border: 1px solid orange; background-color: red; width: 5px; float: right"></div>
<div style="display: inline; width: 100%">
<table cellpadding="0" cellspacing="1" border="0" width="100%" style="background-color: green">
<tbody>
<tr>
<td style="background-color: lightgreen">cell information</td>
</tr>
<tr>
<td style="background-color: lightgreen">cell information</td>
</tr>
<tr>
<td style="background-color: lightgreen">cell information</td>
</tr>
<tr>
<td style="background-color: lightgreen">cell information</td>
</tr>
</tbody>
</table>
</div>
<div id="bottom" style="border: 1px solid yellow; background-color: red; height: 5px;"></div>
</div>

</body>
</html>

that code gets me close, but the left and right divs just arent playing right. i cant get them to be a hieight of 100%, and to get them to force the table to sit between them.

any help? ive included a picture if the description above doesnt help

coothead

02-15-2009, 03:07 AM

Hi there aaron.martinas,

you will never get it to work like that. :eek:

Have a look at this example, it may suit your requirements, well almost. ;)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#outside {
width: 95%;
margin:auto;
border:1px dashed #000;
}
#inner {
padding:5px;
border:2px solid #ff0;
background-color:#f00;
}
#table1 {
width:100%;
border:2px solid #ff0;
background-color:#008000;
}
#table1 td {
background-color:#90ee90;
}
</style>

</head>
<body>

<div id="outside">
<div id="inner">

<table id="table1" cellpadding="0" cellspacing="1">
<tbody>
<tr>
<td>cell information</td>
</tr><tr>
<td>cell information</td>
</tr><tr>
<td>cell information</td>
</tr><tr>
<td>cell information</td>
</tr>
</tbody>
</table>

</div>
</div>

</body>
</html>

coothead

Angry Black Man

02-15-2009, 12:05 PM

the framing was because i need to use custom backgrounds in each of the four "frame" divs, and because the height of the whole thing is variable, so it would be a repeating background

thanks for the attempt!

coothead

02-15-2009, 01:38 PM

Hi there aaron,
the framing was because I need to use custom backgrounds in each of the four "frame" divs
Well, you did not mention that in your original post, you naughty boy. ;)

If I had been aware of that requirement, I would have offered you this example for your consideration...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<base href="http://www.coothead.co.uk/images/">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#outside {
width:95%;
margin:auto;
border:1px dashed #000;
}
#top {
height:10px;
margin:5px 5px 0;
background-image:url(anim4.gif);
border:1px solid #008000;
font-size:0; /* this is required by IE 6 */
}
#inner_left {
margin-left:5px;
padding-left:10px;
border-left:1px solid #008000;
background-image:url(anim1.gif);
background-repeat:repeat-y;
}
#inner_right {
margin-right:5px;
padding-right:10px;
border-right:1px solid #008000;
background-image:url(anim2.gif);
background-repeat:repeat-y;
background-position:right top;
}
#table1 {
width:100%;
border-right:1px solid #008000;
border-left:1px solid #008000;
border-collapse:collapse;
}
#table1 td {
background-color:#90ee90;
border-bottom:1px solid #008000;
}
#table1 #no_border {
border-bottom:0;
}
#bottom {
height:10px;
margin:0 5px 5px;
border:1px solid #008000;
background-image:url(anim5.gif);
font-size:0; /* this is required by IE 6 */
}
</style>

</head>
<body>

<div id="outside">

<div id="top"></div>

<div id="inner_left">

<div id="inner_right">

<table id="table1"><tbody><tr>

<td>cell information</td>
</tr><tr>
<td>cell information</td>
</tr><tr>
<td>cell information</td>
</tr><tr>
<td id="no_border">cell information</td>

</tr></tbody></table>

</div>

</div>

<div id="bottom"></div>

</div>

</body>
</html>

coothead

Angry Black Man

02-15-2009, 02:27 PM

wow, that's BEAUTIFUL!

...you did not mention that in your original post...

kinda, but the idea i presented required 4 divs framing the table :) but it's of no consequence now! thanks!!

coothead

02-15-2009, 02:35 PM

No problem, you're very welcome. ;)