Jump to content

[SOLVED] 100% tables (not divs!) with CSS


HaLo2FrEeEk

Recommended Posts

I've looked ALL over for help with this and all I can find is things explaining how to do it with DIV's, I need to be abl eto do it with tables.  I'm building a new layout for my site and it needs tables, div's won't work.  The thing is, I'm pretty sure I'm following what it seems I need to do to the letter, and yet it still won't change.  Here is my stylesheet code:

 

/*
  Clan Infectionist V2 Theme
  Created by Rod1mus
  Modified by HaLo2FrEeEk
  HTML/CSS Code written by HaLo2FrEeEk
  http://claninfectionist.com/
*/

html, body    {
        background-color: #3c3c3c;
        margin: 0px;
        height: 100%;
        }

table.container {
height: auto;
height: 100%;
min-height: 100%;
}

 

Then I set the table that needs to fill the page vertically:

 

<?php
//HEADER
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="keywords" content="infectionist,infection,clan,machinima,halo,HaLo2FrEeEk,Ze Popcorn King,movies,video,games,xbox,machine,cinema">
<meta name="description" content="Clan Infectionist Machinima - Welcome to the Ranks of The Infected.">
<meta name="author" content="HaLo2FrEeEk">
<meta name="ROBOTS" content="ALL">
<meta name="verify-v1" content="IUWiHlM/H0O1FXC7taULa44k4+gGs/bvyBIgr7HHoGg=">
<link rel="icon" href="http://claninfectionist.com/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://claninfectionist.com/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="alternate" type="application/rss+xml" title="Clan Infectionist Machinima News Feed" href="http://claninfectionist.com/feed.rss">
<title>Welcome to the Ranks of The Infected</title>
<script language="Javascript" src="http://claninfectionist.com/misc/xmlhttp.js" type="text/javascript">
<!--//-->
</script>
<script language="Javascript" src="http://claninfectionist.com/pages/clicky/display.php" type="text/javascript">
<!--//-->
</script>
</head>
<body background="background.png">
<table align="center" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">

<table border="0" cellpadding="0" cellspacing="0" width="794" class="container">
<tr>
<td width="7" style="background: url(edge_left.png);"> </td>
<td style="background: #494949;" align="center" valign="top">

<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td><img src="header.png" alt=""></td>
</tr>
</table>

<?php
//CONTENT
?>

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>Content goes here!</td>
</tr>
</table>

<?php
//FOOTER
?>

</td>
<td width="7" style="background: url(edge_right.png);"> </td>
</tr>
</table>

</td>
</tr>
</table>
</body>
</html>

 

The thing is, it will NOT expand to fill the page.  What I need is something where the footer, which will be a certain height, is either always at the bottom of the page, or if the page content is taller than the browser window, it will be at the bottom of the content.  This template requires that the footer be at the bottom of the page since it is a black table holding a few images and links, but the template would look cut-off if the footer was in the middle of the page.  Please, PLEASE help me with this, I will love you forever!

Link to comment
https://forums.phpfreaks.com/topic/104514-solved-100-tables-not-divs-with-css/
Share on other sites

This style could apply 100% table.

 

html, body, #wrapper {
      height:100%;
      margin: 0;
      padding: 0;
      border: none;
      text-align: center;
   }
   #wrapper {
      margin: 0 auto;
      text-align: left;
      vertical-align: middle;
      width: 100%;
   }

<table id=wrapper>

I think I figured it out, all I had to do was do the html and body 100% like normal, then set style="height:100%" inside the tables I want full sized.  It worked.  I should be good for now, but I'll let you know if I need anything else.  Thank you for the reply.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.