Tables with 100% width and height

Griff · #1 (**permalink**) Feb 4th, 2008, 05:32

When making HTML I enjoy making tables that are 100% width and height, cos then I can set the single cell (only one column and only one row) to be middle and centred. This way I can put stuff in the dead centre of the page.

Recently I can't seem to get the height to stay at 100%. I just don't get it. I use Dreamweaver, and I've been doing the exact same thing for years, but with the version of DW I'm using now, it just doesn't seem to work (for the height only).

Has anyone else had this sort of experience or know a solution?

Ta.

Monie · #2 (**permalink**) Feb 4th, 2008, 05:58

Well, you should consider using DIV (CSS) instead of the old way which is TABLE

Your browser loads pages with CSS codes much more faster than pages that have table elements inside it! In other words its slow down your HTML rendering process.

So... Here is how you do it in CSS:
First, paste this CSS style in your <head> section of your HTML page.

HTML: Select all

<style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
        
        div#container {
            margin: 5px auto; /*This is how you center your page*/
            width: 90%;
            border: 1px solid #000;
            padding: 5px;
            background-color: #ddd;
        }
</style>

And then, put this DIV in your <body> section of your HTML page.

HTML: Select all

<body>
<div id="container">
    <h1>Centered Div - Throw all your cool stuff here!</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
</body>

EDIT:
Forgot to include the link here!
and some of our very own tutorial in the CSS forum sticky here!

saltedm8 · #3 (**permalink**) Feb 4th, 2008, 06:00

sorry, but there is only one answer, learn css ( as stated above ), start here http://www.cssbasics.com/ , any questions and we are on hand to help

Griff · #4 (**permalink**) Feb 5th, 2008, 03:10

Can I modify this code to change or at least add a height value (100%)? Because that's more what I'm really after. Making my table the full length (height) of the browser page / window.

Cos I'm trying to not just centre the page horizontally, but also vertically.

I guess not... I just tried it. : /

I just read thru Chapter 15 (CSS Width and Height) from http://www.cssbasics.com/, and tried the height, min-height, and max-height values, but none worked. Can someone suggest what I might be doing wrong?

Monie · #5 (**permalink**) Feb 5th, 2008, 04:02

Yes you can! Gimme your current HTML and CSS and I'll see what I can do

Griff · #6 (**permalink**) Feb 5th, 2008, 04:06

Could it be that the item I want to be 100% in height needs to be IN something with a value so it knows what 100% actually is?

Would you like my entire HTML and CSS code? They're rather lengthy!

Monie · #7 (**permalink**) Feb 5th, 2008, 04:46

Do you host it somewhere?
Well, if you want to center them horizontally, you just need to change one line of code in the CSS that I gave you earlier

Code: Select all

#container {
 margin: 0 auto; /*This is how you center your page Horizontally*/
 width: 90%;
 border: 1px solid #000;
 padding: 5px;
 background-color: #ddd;
}

or using the absolute positioning like this:

Code: Select all

#container {
 margin: 0;
 padding: 5px;
 position: absolute;
 top: 0;
 right: 10%;
 width: 80%;
 border: 1px solid #000;
 background-color: #ddd;
}

Griff · #8 (**permalink**) Feb 5th, 2008, 04:52

Yup, you can see the website hosted here:

http://griffdesign.com/websites/lc/content/home.html

The CSS file (lightcycle.css) is in the same folder.

I tried adding "height: 100%;" to the code, but it didn't seem to make a difference...

I want to centre both Horizontally AND Vertically. I've got the horizontal working, but not the vertical. As you will see on that link, the design layout ought to extend to the bottom of the browser window.

Monie · #9 (**permalink**) Feb 5th, 2008, 05:08

Well I must say that you should not use table if you want to learn CSS. You use CSS for your page layout and just use table for tabular data like displaying data from your database stuff

By the way here is the trick:

HTML: Select all

        #Container {
            margin: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 20%; /*play around with this value to center your page*/
            width: 60%;    /*play around with this value to center your page*/        
            padding: 0px;
            border: 1px solid red;
        }

Griff · #10 (**permalink**) Feb 5th, 2008, 06:05

I just realised I may have been leading you astray... I'm very tired, sorry!

What I'm actually after is making the table reach the bottom of the browser window. Usually, and in the past I've been able to make a table 100% in height and it'd stretch all the way from the top of the window to the bottom. Centering is more of what I do after I've stretched the table out.

Monie · #11 (**permalink**) Feb 5th, 2008, 06:10

Ohh, LOL. It's ok tho...
I haven't play around with table for quiet sometime and in fact I rarely use table for my layout

CSS is the best way for lay outing our page. You might want to check that out!
Cheers...

Griff · #12 (**permalink**) Feb 5th, 2008, 07:03

Yeah, while searchign the web I noticed a lot of people seem to bag tables and rave about CSS. While I do know how to use CSS, and I have been using it for a few years now, I can't understand how it could be better than tables for layouts, but I guess that's another subject altogether.

Anyways, here's the site now, as it was meant to be.

http://griffdesign.com/websites/lc/content/home.html

I finally figured it out. It wasn't an HTML or CSS problem! Stupid Dreamweaver had code at the top of the page that I realised many of the websites I've designed in the past never had... Protocols and what not... This stuff:

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

I know that stuff is important, but it's screwing with my design...

Monie · #13 (**permalink**) Feb 5th, 2008, 07:14

It's a HTML doctype. You should use a strict doctype or you could choose from here!

Griff · #14 (**permalink**) Feb 5th, 2008, 07:22

Thanks! : )

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS Box of auto width and height?	Bolt	Web Page Design	2	Apr 14th, 2008 08:20
floating a div across the whole width and height of a table cell	cosmicbdog	Web Page Design	3	Feb 1st, 2008 14:26
Pictures disappearing with correct width and height!	ChrisTheSoul	Web Page Design	3	Sep 3rd, 2007 21:56
Borders made from graphics, but fluid width and height	wickedmoon	Web Page Design	1	Aug 17th, 2007 11:20
Trouble with form controls. Height, width and all that	magnetica	Web Page Design	7	Aug 10th, 2007 12:47

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Tables with 100% width and height