...

View Full Version : Trouble displaying 100% height div



Papaphreaky
01-31-2007, 05:28 AM
Hey-o:

I have encountered several snares in my css layout. I have spent HOURS researching solutions to this, none of which have worked.

First of all, when resizing the browser window in FF and IE the left and right columns do not maintain 100% height. Second, when resizing in IE the center-column data is pushed down for some reason. And if not to make matters worse I can't get it to display properly in Dreamweaver MX for MAC.

Can anybody help. I've attached the html and css files.

:Pat

_Aerospace_Eng_
01-31-2007, 07:10 AM
Help us help you. Setup a test page somewhere. Many of us don't have to time to reconstruct your site. Another thing Dreamweaver is NOT a browser, don't rely on it to be accurate.

Papaphreaky
01-31-2007, 07:17 AM
Thanks for your reply _Aero.

The page is setup here (http://seriousillness.org/css/3-column-template.htm).

_Aerospace_Eng_
01-31-2007, 07:23 AM
You'll need to use background images to fake the equal height columns. You should also be using min-height.

http://www.alistapart.com/articles/fauxcolumns

IMO you are using way too many divs. You have divitis (look it up its common for beginners).

Fix your coding errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fseriousillness.org%2Fcss%2F3-column-template.htm) while your at it.

butlins
01-31-2007, 01:13 PM
I think you're relying a little too much on Dreamweaver to generate your CSS for you, I'm afraid. I can recognise it, as it's exactly what I did when starting, and my code looked exactly the same as yours (I just finished redoing what I always proudly thought of as 'my first CSS site', but which looking back was basically creating a table-based layout using divs instead).

The idea with CSS is that you start with text and images that flow in a logical order; use HTML to give it structure using headings, lists, paragraphs etc (and start to address issues of accessibility through alt tags for images, abbr and acronym tags for abbreviations etc); group sections together using divs; and then use CSS to pull it into the design you want to achieve.

Ideally no CSS appears in the HTML file itself - the presentation is controlled from an entirely external CSS file.

I looked through your page, and this is how I would now approach it.

Start with an unstyled HTML file that contains all the text on your page in the order in which it would logically appear. My stab the HTML looks like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XHTML for template</title>
</head>
<body>
<div id="header">
<h1>Living With Serious Illness</h1>
<h2> Sponsored by [Your Organization] </h2>
<p><img src="Living%20with%20Serious%20Illness_files/Logo.jpg" alt="Butterfly logo" width="200" height="100" /></p>
<h3>Replace butterflies with your logo</h3>
<p><a href="#content_secondary">Skip Navigation</a></p>
<ul>
<div id="nav">
<li><a href="#" accesskey="h">Home</a></li>
<li><a href="http://seriousillness.org/demo/emotional/index.html" accesskey="e">Emotional-Spiritual
Issues</a></li>
<li><a href="http://seriousillness.org/demo/decisions/index.html" accesskey="i">Important
Decisions</a></li>
<li><a href="http://seriousillness.org/demo/programs/categories.php" accesskey="c">Community
Programs</a></li>
</div>
</ul>
</div>
<div id="content">
<div id="subnavcol">
<form id="searchBoxForm" method="post" action="phpdig/search.php">
<fieldset>
<p>
<label for="query_string">Search this site</label>
<input type="text" name="query_string" id="query_string" />
</p>
</fieldset>
<p>
<input name="Search" type="submit" id="Search" value="Go" />
</p>
</form>
<ul>
<div id="subnav">
<li><a href="#" accesskey="h">Home</a></li>
<li><a href="http://seriousillness.org/demo/medical/index.html" accesskey="m">Medical
Concerns</a></li>
<li><a href="http://seriousillness.org/demo/emotional/index.html" accesskey="e">Emotional-Spiritual
Issues</a></li>
<li><a href="http://seriousillness.org/demo/decisions/index.html" accesskey="i">Important
Decisions</a></li>
<li><a href="http://seriousillness.org/demo/programs/categories.php" accesskey="c">Community
Programs</a></li>
<li><a href="http://seriousillness.org/demo/administrative/providers.html" accesskey="p">For
Providers</a></li>
<li><a href="http://seriousillness.org/demo/programs/adminpages/contactus.php" accesskey="a">About
Us</a></li>
<li><a href="http://seriousillness.org/demo/administrative/sitemap.html" accesskey="o">Contact
Us</a></li>
<li><a href="http://seriousillness.org/demo/administrative/sitemap.html" accesskey="s">Site
Map</a></li>
</div>
</ul>
<form id="surveyForm" action="feedback.php" method="post" enctype="multipart/form-data">
<fieldset>
<fieldset>
<legend>Did you find what you were looking for?</legend>
<p>
<input name="foundit" type="radio" value="YES" id="foundit" />
<label for="yes">Yes</label>
<input name="foundit" type="radio" value="NO" id="foundit" />
<label for="no">No</label>
<input name="foundit" type="radio" value="SORT OF" id="foundit" />
<label for="sortof">Sort of</label>
</p>
</fieldset>
<p>
<label for="improve">How can we improve this site?</label>
<textarea name="improve" cols="20" rows="4" id="improve"></textarea>
</p>
<p>
<label for="email">If you would like a response, please include your e-mail
address:</label>
<input type="text" name="email" id="label" />
</p>
</fieldset>
<p>
<input name="submit" value="Submit" type="submit" />
</p>
</form>
</div>
<div id="content_secondary">
<h2>In The News</h2>
<p> Coalition Receives National Rallying Points <a href="http://respectmywishes.org/documents/awardofexcellence.doc">Award
of Excellence</a></p>
<p><a href="http://respectmywishes.org/downloadables/AdvancedDirective.pdf"><img src="Respect%20My%20Wishes_files/AdvDir.gif" alt="Download an Advance Directive" width="146" height="77"/></a></p>
<h2>What is an Advance Directive?</h2>
<p>This is a document that tells people your wishes regarding life support
should you be in a situation where you are unable to speak for yourself.
It spares your family the heartbreak of having to guess what you would want.
It also makes your wishes known to your health care providers.</p>
</div>
<div id="content_primary">
<p>E-mail this page to a friend</p>
<h2>Living With Serious Illness</h2>
<p><img src="Living%20with%20Serious%20Illness_files/cMariana.jpg" alt="Mariana" height="72" width="96" /></p>
<p>&quot;Dad is needing a lot of help, and Mom is exhausted. I try to pitch
in, but I don't always know what to do or say. I need a place to find out
basic information, like how to keep Dad comfortable or what to do when he
doesn't want to eat. I'm not sure what we need to do legally to get things
in order. And sometimes I just need help understanding my own emotions .
. . I know there are programs available for families in our situation. I'm
just not sure how to find them.&quot;</p>
<p> Does any of this sound familiar? If so, you've come to the right place!
We have created this website to help the seriously ill and their families
learn how to live as comfortably as they can within the context of their
disease. Whether you need tips on handling the <a href="http://seriousillness.org/demo/medical/index.html"><strong>medical
and physical</strong></a> aspects of care, are concerned about <a href="http://seriousillness.org/demo/emotional/index.html"><strong>emotional
or spiritual issues</strong></a>, or simply want to know about important <a href="http://seriousillness.org/demo/decisions/index.html"><strong>legal
and financial decisions</strong></a>, seriousillness.org/[yourcommunity]
is the place to turn. We even have a listing of <a href="http://seriousillness.org/demo/programs/categories.php"><strong>local,
state, and national programs</strong></a> that offer services and support.<br />
<br />
It's true. Caring for an ailing family member can be one of the saddest and
most difficult experiences in a family's history together. Yet, it can also
be one of a family's most fulfilling, meaningful, and intimate experiences.
A lot of love, and even laughter, can be shared as the patient and family
learn to live fully now while preparing for tomorrow. It's a balancing act,
to be sure. But with education and support, you can enhance the quality of
all the time you have left together, whether it's years, months, weeks, or
days.</p>
<p>If you have questions, please do not hesitate to call us at [your phone
number] or email us at [your email address]. We'd be delighted to help! </p>
<div id="footer">
<p>This website is sponsored by <a href="http://seriousillness.org/demo/programs/adminpages/aboutus.php"><strong>[Your
Organization]</strong></a>, providing compassionate care and support
to the seriously ill and their families since [date].</p>
<p>Site created by <a href="http://www.letscollaborate.us/"><strong>Let's
Collaborate!</strong></a></p>
<p> Home | <a href="http://seriousillness.org/demo/medical/index.html">Medical</a> | <a href="http://seriousillness.org/demo/emotional/index.html">Emotional-Spiritual</a> | <a href="http://seriousillness.org/demo/decisions/index.html">Decisions</a> | <a href="http://seriousillness.org/demo/programs/categories.php">Community
Programs For Providers</a> | <a href="http://seriousillness.org/demo/programs/adminpages/aboutus.php">About
Us</a> | <a href="http://seriousillness.org/demo/programs/adminpages/contactus.php">Contact
Us</a> | <a href="http://seriousillness.org/demo/administrative/sitemap.html">Site
Map</a> </p>
</div>
</div>
</div>
</body>
</html>

If you look at this in a browser, you'll see it appears in a logical order. You'll see I've put all the navigation in as unordered lists, and added accesskeys; I've also put fieldsets around all the form elements.

Once you've got the basic structure sorted out, you can then look at the presentation, including rollover buttons which can be achieved without the use of any scripting.

Rather than use lots of <span> and <class> to style individual bits of text. You can now target bits of CSS using the divs.

I'll see if I can have a bash later at what the CSS might look like, but if you pull that file into Dreamweaver, and create a new external CSS file, you could have a start.

I always recommend Sitepoint books, as I think they provide a really good introduction to design using CSS. There's Build Your Own Web Site The Right Way Using HTML & CSS (http://www.sitepoint.com/books/html1/) and HTML Utopia: Designing Without Tables Using CSS (http://www.sitepoint.com/books/css2/) which would make very good starting points.

butlins
01-31-2007, 02:55 PM
This is adapted from the Dynamic Drive CSS Library (http://www.dynamicdrive.com/style/) - the HTML has changed a bit from the example above - a few extra divs have been added.

There's an annoying space underneath the header - but you could always just regard that as an exercise in debugging CSS... I'm afraid I've got to shoot off to a meeting.

This is the HTML:

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Liquid Layout #3.1- (Fixed-Fluid-Fixed)</title>
<link href="screen.css" rel="stylesheet" type="text/css" />
<script src="equalcolumns.js" type="text/javascript"></script>
</head>
<body>
<div id="maincontainer">
<div id="topsection">
<div class="innertube">
<h1>Living With Serious Illness</h1>
<h2> Sponsored by [Your Organization] </h2>
<p><img src="Living%20with%20Serious%20Illness_files/Logo.jpg" alt="Butterfly logo" width="200" height="100" /></p>
<h3>Replace butterflies with your logo</h3>
<p><a href="#content_secondary">Skip Navigation</a></p>
<div id="nav">
<ul>
<li><a href="#" accesskey="h">Home</a></li>
<li><a href="http://seriousillness.org/demo/emotional/index.html" accesskey="e">Emotional-Spiritual
Issues</a></li>
<li><a href="http://seriousillness.org/demo/decisions/index.html" accesskey="i">Important
Decisions</a></li>
<li><a href="http://seriousillness.org/demo/programs/categories.php" accesskey="c">Community
Programs</a></li>
</ul>
</div>
</div>
</div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
<p>E-mail this page to a friend</p>
<h2>Living With Serious Illness</h2>
<p><img src="Living%20with%20Serious%20Illness_files/cMariana.jpg" alt="Mariana" height="72" width="96" /></p>
<p>&quot;Dad is needing a lot of help, and Mom is exhausted. I try to
pitch in, but I don't always know what to do or say. I need a place
to find out basic information, like how to keep Dad comfortable or
what to do when he doesn't want to eat. I'm not sure what we need to
do legally to get things in order. And sometimes I just need help understanding
my own emotions . . . I know there are programs available for families
in our situation. I'm just not sure how to find them.&quot;</p>
<p>Does any of this sound familiar? If so, you've come to the right place!
We have created this website to help the seriously ill and their families
learn how to live as comfortably as they can within the context of
their disease. Whether you need tips on handling the <a href="http://seriousillness.org/demo/medical/index.html"><strong>medical
and physical</strong></a> aspects of care, are concerned about <a href="http://seriousillness.org/demo/emotional/index.html"><strong>emotional
or spiritual issues</strong></a>, or simply want to know about important <a href="http://seriousillness.org/demo/decisions/index.html"><strong>legal
and financial decisions</strong></a>, seriousillness.org/[yourcommunity]
is the place to turn. We even have a listing of <a href="http://seriousillness.org/demo/programs/categories.php"><strong>local,
state, and national programs</strong></a> that offer services and support.</p>
<p> It's true. Caring for an ailing family member can be one of the saddest
and most difficult experiences in a family's history together. Yet,
it can also be one of a family's most fulfilling, meaningful, and intimate
experiences. A lot of love, and even laughter, can be shared as the
patient and family learn to live fully now while preparing for tomorrow.
It's a balancing act, to be sure. But with education and support, you
can enhance the quality of all the time you have left together, whether
it's years, months, weeks, or days.</p>
<p>If you have questions, please do not hesitate to call us at [your
phone number] or email us at [your email address]. We'd be delighted
to help! </p>
</div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube">
<form id="searchBoxForm" method="post" action="phpdig/search.php">
<fieldset>
<p>
<label for="query_string">Search this site</label>
<input type="text" name="query_string" id="query_string" />
</p>
</fieldset>
<p>
<input name="Search" type="submit" id="Search" value="Go" />
</p>
</form>
<ul>
<div id="subnav">
<li><a href="#" accesskey="h">Home</a></li>
<li><a href="http://seriousillness.org/demo/medical/index.html" accesskey="m">Medical
Concerns</a></li>
<li><a href="http://seriousillness.org/demo/emotional/index.html" accesskey="e">Emotional-Spiritual
Issues</a></li>
<li><a href="http://seriousillness.org/demo/decisions/index.html" accesskey="i">Important
Decisions</a></li>
<li><a href="http://seriousillness.org/demo/programs/categories.php" accesskey="c">Community
Programs</a></li>
<li><a href="http://seriousillness.org/demo/administrative/providers.html" accesskey="p">For
Providers</a></li>
<li><a href="http://seriousillness.org/demo/programs/adminpages/contactus.php" accesskey="a">About
Us</a></li>
<li><a href="http://seriousillness.org/demo/administrative/sitemap.html" accesskey="o">Contact
Us</a></li>
<li><a href="http://seriousillness.org/demo/administrative/sitemap.html" accesskey="s">Site
Map</a></li>
</div>
</ul>
<form id="surveyForm" action="feedback.php" method="post" enctype="multipart/form-data">
<fieldset>
<fieldset>
<p>Did you find what you were looking for?</p>
<p>
<input name="foundit" type="radio" value="YES" id="foundit" />
<label for="yes">Yes</label>
<input name="foundit" type="radio" value="NO" id="foundit" />
<label for="no">No</label>
<input name="foundit" type="radio" value="SORT OF" id="foundit" />
<label for="sortof">Sort of</label>
</p>
</fieldset>
<p>
<label for="improve">How can we improve this site?</label>
<textarea name="improve" cols="20" rows="4" id="improve"></textarea>
</p>
<p>
<label for="email">If you would like a response, please include your
e-mail address:</label>
<input type="text" name="email" id="label" />
</p>
</fieldset>
<p>
<input name="submit" value="Submit" type="submit" />
</p>
</form>
</div>
</div>
<div id="rightcolumn">
<div class="innertube">
<h2>In The News</h2>
<p> Coalition Receives National Rallying Points <a href="http://respectmywishes.org/documents/awardofexcellence.doc">Award
of Excellence</a></p>
<p><a href="http://respectmywishes.org/downloadables/AdvancedDirective.pdf"><img src="Respect%20My%20Wishes_files/AdvDir.gif" alt="Download an Advance Directive" width="146" height="77"/></a></p>
<h2>What is an Advance Directive?</h2>
<p>This is a document that tells people your wishes regarding life support
should you be in a situation where you are unable to speak for yourself.
It spares your family the heartbreak of having to guess what you would
want. It also makes your wishes known to your health care providers.</p>
</div>
</div>
<div id="footer">
<div class="innertube">
<p>This website is sponsored by <a href="http://seriousillness.org/demo/programs/adminpages/aboutus.php"><strong>[Your
Organization]</strong></a>, providing compassionate care and support
to the seriously ill and their families since [date].</p>
<p>Site created by <a href="http://www.letscollaborate.us/"><strong>Let's
Collaborate!</strong></a></p>
<p> Home | <a href="http://seriousillness.org/demo/medical/index.html">Medical</a> | <a href="http://seriousillness.org/demo/emotional/index.html">Emotional-Spiritual</a> | <a href="http://seriousillness.org/demo/decisions/index.html">Decisions</a> | <a href="http://seriousillness.org/demo/programs/categories.php">Community
Programs For Providers</a> | <a href="http://seriousillness.org/demo/programs/adminpages/aboutus.php">About
Us</a> | <a href="http://seriousillness.org/demo/programs/adminpages/contactus.php">Contact
Us</a> | <a href="http://seriousillness.org/demo/administrative/sitemap.html">Site
Map</a> </p>
</div>
</div>
</div>
</body>
</html>


Here's the CSS (named screen.css in the HTML):

/* Reset styles */

* {
margin: 0;
padding: 0;
border:0;
}

body, p, blockquote {
margin: 0;
padding: 0;
}

a img, iframe { border: none; }

/* Headers
------------------------------*/

h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-size: 100%;
}

/* Lists
------------------------------*/

ul, ol, dl, li, dt, dd {
margin: 0;
padding: 0;
}

/* Links
------------------------------*/

a, a:link {}
a:visited {}
a:hover {}
a:active {}

/* Forms
------------------------------*/

form, fieldset {
margin: 0;
padding: 0;
}

fieldset { border: 1px solid #000; }

legend {
padding: 0;
color: #000;
}

input, textarea, select {
margin: 0;
padding: 1px;
font-size: 100%;
font-family: inherit;
}

select { padding: 0; }

/* Universal HTML elements */

body {
line-height:1.5em;
}

p {
margin: 0 0 1em 0;
}

/* Universal classes */

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

/* Topsection styles */

#topsection {
background: #EAEAEA;
margin:0;
}

#topsection h1{
padding-top: 15px;
}

/* End Topsection styles */

/* Contentwrapper styles */

#contentwrapper{
float: left;
width: 100%;
}

/* End Contentwrapper styles */

/* Contentcolumn styles */

#contentcolumn{
margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
background-color:#FFF;
}

/* End Contentcolumn styles */

/* Leftcolumn styles */

#leftcolumn{
float: left;
width: 230px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}

/* End Leftcolumn styles */

/* Rightcolumn styles */

#rightcolumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left marginto -(RightColumnWidth)*/
background: #FDE95E;
}

/* End Rightcolumn styles */

/* Footer styles */

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

/* End Footer styles */




And finally a bit of ECMAScript to equalise the column heights (named equalcolumns.js in the HTML):


//** Dynamic Drive Equal Columns Height script v1.01 (Nov 2nd, 06)
//** http://www.dynamicdrive.com/style/blog/entry/css-equal-columns-height-script/

var ddequalcolumns=new Object()
//Input IDs (id attr) of columns to equalize. Script will check if each corresponding column actually exists:
ddequalcolumns.columnswatch=["leftcolumn", "rightcolumn", "contentwrapper"]

ddequalcolumns.setHeights=function(reset){
var tallest=0
var resetit=(typeof reset=="string")? true : false
for (var i=0; i<this.columnswatch.length; i++){
if (document.getElementById(this.columnswatch[i])!=null){
if (resetit)
document.getElementById(this.columnswatch[i]).style.height="auto"
if (document.getElementById(this.columnswatch[i]).offsetHeight>tallest)
tallest=document.getElementById(this.columnswatch[i]).offsetHeight
}
}
if (tallest>0){
for (var i=0; i<this.columnswatch.length; i++){
if (document.getElementById(this.columnswatch[i])!=null)
document.getElementById(this.columnswatch[i]).style.height=tallest+"px"
}
}
}

ddequalcolumns.resetHeights=function(){
this.setHeights("reset")
}

ddequalcolumns.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
}

ddequalcolumns.dotask(window, function(){ddequalcolumns.setHeights()}, "load")
ddequalcolumns.dotask(window, function(){if (typeof ddequalcolumns.timer!="undefined") clearTimeout(ddequalcolumns.timer); ddequalcolumns.timer=setTimeout("ddequalcolumns.resetHeights()", 200)}, "resize")

Papaphreaky
02-01-2007, 10:39 PM
Thanks Butlin. I'm going to assess the first HTML that you posted, and look at the other. I really appreciate the help. A little guidance is exactly what I need to evolve.

I'll post back when I've finished something.

: Pat



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum