Vertical Centering CSS

Forum Moderators: not2easy

Message Too Old, No Replies

Vertical Centering CSS

Why this white gap at bottom?

Kickedout

1:09 am on Jun 30, 2011 (gmt 0)

I have css style


.tablas { 
height: 100%; 
} 

body {
margin: 70px 0px 0px 0px;
padding: 0px;
background-repeat: no-repeat;
background-position: left top;
height: 100%;
}

html {
height: 100%;
}

html code:


<table width=100% border=0 cellpadding=0 cellspacing=0 class=tablas><tr><td><table width=90% border=0 align=center cellpadding=0 cellspacing=5 class=tablas><tr><td colspan=2 valign=top><h1><b>Bla </b></h1>

And inside that one another table class=tablas

Am I missing something? Because a whitespace of some 100 px is on bottom of page. Thus table doesn't expand vertically to 100% of height

lucy24

3:54 am on Jun 30, 2011 (gmt 0)

It saves a lot of time if you first run your page through the w3c validators for both HTML and CSS, and start by fixing those errors. Or ask for help if there's a validation error you really don't understand.

100% doesn't mean 100% of the window height. It means 100% of the containing block, whose size is determined by its content unless you have it set in pixels. There are several recent threads involving "sticky footers" that present different ways of forcing things all the way to the bottom of the window.

I suppose it is Not Nice to ask why you have that
<table width=100% border=0 cellpadding=0 cellspacing=0 class=tablas>
(should all be inside quotes, btw) business when you have a perfectly decent stylesheet right there. Use it!

Set a default table
{border: none; border-collapse: collapse;}
or
{border-collapse: separate; border-spacing: 5px;}
or whatever you will use most often, and make classes for other styles.

And a default cell
{padding: 0; text-align: left; vertical-align: top;}
supplemented by
td.center {text-align: center;}
td.right {text-align: right;}
and so on.

If a class is only going to be used with tables, define it as
table.tablas {blahblah}
to make the CSS run more smoothly.

Oh, and prepare for rude questions about why you are using tables for format ;)

rocknbil

3:57 pm on Jun 30, 2011 (gmt 0)

If it's the only thing on the page, it won't. You could use position: absolute to position the table to the bottom of the viewport.

Otherwise, (and may still have to do this) if there's content to fill the page and it's still got a space, try adding

h1 { margin-bottom:0; padding-bottom:0; }

You might also use something besides h1 and style it as you need it, h1's are the top level head and **should** be at the top of the page, and only one on the page.

Kickedout

9:03 pm on Jun 30, 2011 (gmt 0)

Thanks, that site has like 10 years online. I don't even remember the existance of divs when created. Years later was "updated" but the main structure wasn't moved to all css, because is a real pain to move the entire structure.

I do have content inside tables (not included for this example) but table don't reach the bottom of page as described. The ausence of "" was caused by a code "zipper" program that trimmed out spaces and unfortunatelly "" too.

Now is literally impossible to restore those on 300 pages of code.
No joy this far with prior suggestions

SuzyUK

9:21 pm on Jun 30, 2011 (gmt 0)

OK for a start I can't see the bottom whitespace "gap" that you're mentioning, I would not recommend absolute positioning, and I see no validation errors.

So this prompts the question, which browsers are you seeing your gap, and which browsers show what you expect.. I do see different things in IE7/8, and Firefox for example.

so the issue here is I think how to get the desired 100% height inherited down through the elements. for example in IE the first (parent) table (class=tablas) does inherit the 100% height from the

html

body

elements, but the nested tables don't. whereas in Firefox they do

Is that what you mean about the bottom gap?

code as read form your OP


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
html, body {margin: 0; padding: 0; height: 100%; background: #fff;}

body {
margin: 70px 0px 0px 0px;
padding: 0px;
background: #eee;
}

.tablas {
height: 100%;
border: 3px double #000;
}

</style>
</head>
<body>


<table width=100% border=0 cellpadding=0 cellspacing=0 class=tablas>
 <tr>
 <td>
 <table width=90% border=0 align=center cellpadding=0 cellspacing=5 class=tablas>
 <tr>
 <td valign=top><h1><b>Bla </b></h1></td>
</tr>
 </table>
 </td>
 </tr>
</table>
 
</body>
</html>