Table layout - HTML / CSS

Tom

Hi everyone,

I'm sure this gets asked a lot in different flavors, but I'm either
doing something wrong or this just won't work.

I'm trying to create a table that's the height of the browser viewport.
I wrote a test page like so:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body style="height:100%; margin: 0; padding: 0">
<table style="height:100%" border=1>
<tr>
<td style="height:50px">1</td>
</tr>
<tr>
<td style="height:50px">2</td>
</tr>
<tr>
<td style="height:auto">3</td>
</tr>
</table>
</body>
</html>

What I was hoping for is that cell 1 and 2 is 50px high, leaving the
third row/cell to fill the remainer. However, this doesn't happen.

Is there a way to accomplish what I'm looking to do? (I may need to
ditch the table altogether). In my case I have a header that's
100pixels high, and a footer that's 50pixels, that I'm trying to line
up with the top and bottom of the window.

Thanks!

Steve

Jan 2 '06 #1

Subscribe Reply

1364

Spartanicus

"Tom" <an**********@yahoo.com> wrote:

I'm sure this gets asked a lot in different flavors,
Then there will be plenty of answers in the group's archive, did you
bother to look?
but I'm either
doing something wrong or this just won't work.

I'm trying to create a table that's the height of the browser viewport.

Tables are for marking up tabular data, not to create a layout.

[snip bogus code]

Don't post code to the group, upload a minimized test case with snippets
of real content, then post the url.

The layout you want isn't supported by IE, the nearest you could get is
with an absolutely positioned footer, but the content would disappear
behind it without always producing a scrollbar. But even in proper
browsers such a layout would cause a major usability issue: "in
document" scroll bars are a usability nightmare.

So the correct answer to wanting a footer to always remain visible is:
stop wanting that.

--
Spartanicus

Jan 2 '06 #2

Borris

Tom wrote:

Is there a way to accomplish what I'm looking to do? (I may need to
ditch the table altogether). In my case I have a header that's
100pixels high, and a footer that's 50pixels, that I'm trying to line
up with the top and bottom of the window.

Use frames, but beware the perils.

Jan 2 '06 #3

Tom

Wow. Yes I did look, wise guy, but didn't see applicable solutions.

Geez-- get a better attitude in the new year.

Jan 2 '06 #4

Tom

Thanks Borris -- I was afraid of that... thanks!

I found a few solutions that more or less gets the job done .... thanks
for the suggestion.

Jan 2 '06 #5

Similar topics

9967

Table height in percents

by: alex | last post by:

Hi, It seems like HTML 4.01 Transitional spec. doesn't allow table height to be expressed in percents. When i have this doctype tag: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01...

HTML / CSS

24396

How to do a <table> with <div> tag

by: Toby Austin | last post by:

I'm trying to replace <table>s with <div>s as much as possible. However, I can't figure out how to do the following… <table> <tr> <td valign="top" width="100%">some data that will...

HTML / CSS

5926

table percentage problem

by: mr_burns | last post by:

hi, is the table percent value for height used for displaying in browsers. i have a table i want to run to the bottom of the screen so it seemed best to set the height value to 100%. when i...

HTML / CSS

5622

table-less layout & forms

by: Zak McGregor | last post by:

Hi all Are there any good solutions to aligning form field names and input boxes without resorting to tables? I am struggling to do this nicely at the moment. Thanks Ciao Zak

HTML / CSS

39083

Spacing table rows

by: Rick DeBay | last post by:

I'm trying to create a layout table, where the spacing between rows varies. I've tried using setting margin-top and border-top for the rows I wan't spaced down from the one above, and I've also...

HTML / CSS

9077

Table Layout and What's Wrong With it

by: Neal | last post by:

Patrick Griffiths weighs in on the CSS vs table layout debate in his blog entry "Tables my ass" - http://www.htmldog.com/ptg/archives/000049.php . A quite good article.

HTML / CSS

2432

advice re convincing someone to avoid table layouts

by: Michael Rozdoba | last post by:

I'm far from a CSS expert, but what I see of it I really like & I love keeping content & style separate. I also hate the way table layout produces convoluted bulky code. However when asked why...

HTML / CSS

5081

table-layout "fixed" gets buffered in IE?

by: Rob Freundlich | last post by:

I have some servlet-generated tabular data that I need to present, so I'm using an HTML Table. In some cases, it can be quite large. I'm flushing the servlet output every N lines to push the data...

HTML / CSS

4152

Align="Center" dosen't work in the Table on my asp.net page

by: ALI-R | last post by:

Hi All, I have two user controls (header and footer) ,,which I've placed in an HTML Table in a page.I set the **align="center"** in the table and the table still is on the left side of the page...

ASP.NET

117

18409

grid structures: TABLE/TR/TD vs. DIV

by: phil-news-nospam | last post by:

Is there really any advantage to using DIV elements with float style properies, vs. the old method of TABLE and TR and TD? I'm finding that by using DIV, it still involves the same number of...

HTML / CSS

7273

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

7322

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

6982

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

5000

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

3161

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...

Networking - Hardware / Configuration

3150

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

1501

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

C# / C Sharp

731

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

374

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

General