SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    An old table trick - css equiv?

    "Back in the day" I used to create fullscreen interfaces using tables:
    Code:
    <html>
    	<head>
    		<style type="text/css">
    			table {
    				table-layout: fixed;
    			}
    			table td {
    				background-color: gray;
    			}
    		</style>
    	</head>
    	<body>
    		<table width="100%" height="100%">
    			<col width="100" /><col width="*" /><col width="200" />
    			<tr height="100">
    				<td>1</td><td>2</td><td>3</td>
    			</tr>
    			<tr height="*">
    				<td>4</td><td>5</td><td>6</td>
    			</tr>
    			<tr height="200">
    				<td>7</td><td>8</td><td>9</td>
    			</tr>
    		</table>
    	</body>
    </html>
    Any rows/cols marked with width/height="*" would auto-resize, and the table would fill the WIDTH and HEIGHT of the page completely with no mucking around.

    Can I do this with just CSS (ie without javascript)?

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    html, body {width : 100&#37;; height: 100%;}
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Stephen.

    Any suggestions for auto-resizing divs or whatever to replace the cells?

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    It's certainly not as easy as it is with tables to do this, you have to be pretty devious
    Code:
    <!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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* commented backslash hack \*/ 
    html, body{height:100&#37;;} 
    /* end hack */
    html,body {margin:0;padding:0}
    body {text-align:center}/* centre for ie5.+*/
    #outer{
    min-height:100%;
    height:auto;
    width:766px;
    border-left:1px solid #000;
    border-right:1px solid #000;
    margin-left:auto;/* center it*/
    margin-right:auto;/* center it*/
    position:relative;
    text-align:left;
    }
    * html #outer{
    height:100%;
    width:768px;/* box model hack for ie5.+*/
    w\idth:766px
    }
    #footer {
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
    height:50px;
    background-color: #FF8080;
    color: #000000;
    }
    #clearfooter{clear:both;height:50px;width:100%}
    div>p {margin:0}
    #header { height:50px; background:#FF8080; }
    </style>
    </head>
    <body>
    <div id="outer">
    <div id="header">Header -</div>
    <p>content goes here</p>
    <div id="clearfooter"></div>
    <div id="footer">Footer -</div>
    </div>
    </body>
    </html>
    Example from Paul's work in the CSS FAQ.

    Any suggestions for auto-resizing divs or whatever to replace the cells?
    Horizontally you can do this type of thing using overflow which makes an element occupy all the space available.
    Code:
    <!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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    * {margin:0;padding:0}
    #left { float: left; width: 500px;}
    #right { overflow: auto; border:1px solid #FC3 }
    </style>
    </head>
    <body>
    <div id="left">Left
    </div>
    <div id="right">Right
    </div>
    </body>
    </html>

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Mark, I'll give it a shot.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •