Page 1 of 1

CSS Boxes

Posted: Sun Sep 14, 2003 7:07 pm
by nigma
Anyone know how to make a box in CSS that will span the entire height of the screen at minimum? So if there are only three words in the box it will still take up the entire height of the sreen (whether resolution is 800x600 or greater).

Thanks for any help provided.

Posted: Sun Sep 14, 2003 7:37 pm
by jason
height: 100%;

That should do it.

Posted: Sun Sep 14, 2003 7:49 pm
by nigma
That is what I tried first, but it for some reason isn't working.

My CSS Div boxes are layed out like:

<div id="container">
<div id="header">// HEADER STUFF</div>
<div id="mainContent">// MAIN CONTENT STUFF</div>
</div>

I added the "height: 100%" to the container div box.

Posted: Sun Sep 14, 2003 11:46 pm
by jason
Sorry, yeah, that could be a problem in some places.

Assuming you are using position: absolute; see if bottom: 0; works for you

Posted: Mon Sep 15, 2003 7:45 am
by Nay
The way I'd do it is:

Code: Select all

<table cellpadding="0" cellspacing="0" width="100%" height="100%" align="center" valign="middle">
<tr><td>
<!-- anything you want here //-->
</td></tr>
</table>
Hope that helps,

-Nay

Posted: Mon Sep 15, 2003 12:04 pm
by Unipus
CSS has problems with the height attribute in its current implementations. There are a variety of ways to trick it using container elements (DIVs within DIVs). I believe that there are relevant articles at http://www.positioniseverything.net.

Another option is to use javascript to get the height of the browser window and assign that pixel value to your DIV. Obviously there are problems with this method, as well. There are fewer display problems with tables (but even then the height=100% thing won't render properly on all platforms), but many more other problems.

You just have to decide what the best way to look at your project is. Does it need to be extensible? forward-looking? deliverable on multiple platforms (portables, PDAs, etc.)?

Posted: Mon Sep 15, 2003 12:27 pm
by SantaGhost
this is what i use:

a div that covers the whole page, inside it a table with three columns, logo , links, content.

this is also very well possible with divs inside divs.

Code: Select all

<script type="text/javascript">
if (window.navigator.appName == "Netscape"){ document.write ("<div align='center'>"); }
else {document.write ("<div id='around'>"); }
</script>
	<table cellspacing="0" cellpadding="1" id="main">
		<tr><td class="tdtop"><img src="SnGlogo.jpg" alt="Santa Ghosts ClanLogo"></td></tr>
		
		<tr><td class="tdlinks">
			<a href="?page=Home">Home</a>
			<a href="?page=About">About</a>
			<a href="?page=Members">Members</a>
			<a href="?page=Contact">Contact</a>
			<a href="?page=Messages">Messages</a>
		</td></tr>
		<tr><td class="tdcontent">
<?php print ($content); ?>
		</td></tr>
	</table>
</div>
style.css (not full file)

Code: Select all

#around &#123; text-align: center; margin: 0;&#125;
table#main &#123; background: #fff; width: 750px; border-collapse: collapse; border: 1px solid #000;&#125;
.tdtop &#123; height: 150px; background: #091D01; text-align: center;&#125;
.tdlinks &#123; background: #000; text-align: center;  background: url("camo_desert.jpg"); padding: 8px; &#125;
.tdcontent &#123; background: #424942 url("halfscr-blue.gif"); color: #fff; padding-bottom: 50px; &#125;

.tdlinks a &#123; text-decoration: none; font-weight: bold; font-size: 20px; color: #FBFFCB; font-family: Verdana, Arial, Helvetica, sans-serif; 
	text-align:center; padding: 2px 6px 2px 6px; margin-right: 3px; background: url("camouflage.jpg"); border: 2px solid #000;
	font-family:	Georgia, Minion Web, Palatino, Book Antiqua, Utopia, Times New Roman, serif;&#125;
.tdlinks a:hover &#123; border-color: #cad603 ; &#125;
example at http://santa-ghosts.pelle-webdesign.net/