-
1. Re: Best way to approach (DIVS/Tables)
brightbelt Mar 10, 2010 7:14 PM (in response to Mike_Watt)Maybe you've already tried this, and it's a Tables method. But I think it'd give you the control you want:
I'd make a Main table with 3 columns and 2 rows. Set the height for the top row and the longer bottom row. Then do 2 nested tables - one in the first column/bottom row cell and another nested table in the second column on the bottom row cell.
Your first nested table has 1 column with 2 rows and the second nested table has 1 column and 1 row. Being nested gives you flexible height control without them "pulling" on the cell within which they are contained.
I hope this helps.
Frank B.
-
2. Re: Best way to approach (DIVS/Tables)
Mike_Watt Mar 10, 2010 10:52 PM (in response to brightbelt)I managed a "hybrid" solution that used a table with three columns (one row), and then <DIV> tags within each column to specify the height for that area/div. It worked well for the primary purpose, but now I can't get it to center properly.
The top of the page (the visible header/lead/navigation) and the footer are all centered and working properly, but the elements in the middle are not. I've tried all kinds of things and nothing does what I need. When I change the table width to "100%" (from the pixel count it has now) it centers, but it spaces everything out horizontally (despite the fact that the <TD> tags have widths specified in them.
If anyone knows how I can get this working please share the knowledge!
-
3. Re: Best way to approach (DIVS/Tables)
osgood_ Mar 11, 2010 12:36 AM (in response to Mike_Watt)You're instructing your table to float: left; in your css and that's what it is doing.
table {
float: left;
}Re-instate the px width of the table and change the above to:
table {
margin: 0 auto;
}
-
4. Re: Best way to approach (DIVS/Tables)
Jeremy bowmangraphics Mar 11, 2010 4:05 AM (in response to Mike_Watt)You might try this sort of approach, which avoids tables altogether:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
.pseudo-table {
margin: 60px auto;
width: 606px;
height:386px;
border:#333 solid 1px;
}
.pseudo-table .col {
float: left;
width: 200px;
border-left:solid;
border-left-color:#333;
border-left-width:1px;
border-right:solid;
border-right-color:#333;
border-right-width:1px;
}
.pseudo-table .col .header {
height: 50px;
}
.pseudo-table .col .half {
height: 150px;
}
.pseudo-table .col .one-third {
height: 100px;
}
.pseudo-table .col .two-thirds {
height: 200px;
}
.pseudo-table .col .full {
height: 312px;
}
.pseudo-table .col .header, .pseudo-table .col .half,
.pseudo-table .col .one-third, .pseudo-table .col .two-thirds, .pseudo-table .col .full {
padding: 5px;
border-top:solid;
border-top-color:#333;
border-top-width:1px;
border-bottom:solid;
border-bottom-color:#333;
border-bottom-width:1px;
}
</style>
</head>
<body>
<div class="pseudo-table">
<div class="col">
<div class="header">Content for class "header" Goes Here</div>
<div class="half">Content for class "half" Goes Here</div>
<div class="half">Content for class "half" Goes Here</div>
</div>
<div class="col">
<div class="header">Content for class "header" Goes Here</div>
<div class="one-third">Content for class "one-third" Goes Here</div>
<div class="two-thirds">Content for class "two-thirds" Goes Here</div>
</div>
<div class="col">
<div class="header">Content for class "header" Goes Here</div>
<div class="full">Content for class "full" Goes Here</div>
</div>
</div>
</body>
</html>
-
5. Re: Best way to approach (DIVS/Tables)
Mike_Watt Mar 11, 2010 8:04 AM (in response to osgood_)Osgood -
Thanks... i'm slowly getting used to using more and more CSS in pages. I really appreciate your help on that.
Jeremy -
Thanks... I'm going to read thru that code when I get home and see what I can learn from it... I would like to get away from tables, but I am not quite there on the learning curve yet. I appreciate the feedback VERY much.




