19 replies [Last post]
Aaron
Offline
Regular
Last seen: 14 years 50 weeks ago
Timezone: GMT-7
Joined: 2004-03-15
Posts: 29
Points: 0

I've been trying to get a box to expand to the full height of the page (the same height as the text) and can't get height:100%; to work...

I'm not sure of another command to do what I want.

sugarfixdesign.com/testing/about.htm

the secondary nav box on the right is the one I need help with.

Thanks,

Aaron

Arkkimaagi
Offline
Regular
Last seen: 18 years 21 weeks ago
Timezone: GMT+2
Joined: 2004-05-11
Posts: 29
Points: 0

Dynamic height box

~ Arkkimaagi ~
Experto credite

Aaron
Offline
Regular
Last seen: 14 years 50 weeks ago
Timezone: GMT-7
Joined: 2004-03-15
Posts: 29
Points: 0

Dynamic height box

I'll certainly try it, Thanks!

Aaron

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 48 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Dynamic height box

Hi

Take a look at this page of mine:

http://207.44.137.103/threeDbox.html

Which is designed just like you want, so why not just lift the code?

Trevor

Aaron
Offline
Regular
Last seen: 14 years 50 weeks ago
Timezone: GMT-7
Joined: 2004-03-15
Posts: 29
Points: 0

Dynamic height box

Hi Trevor,

thanks for the code. I am a little bit confused about the usage. I saw in another post that you use the opening and closing comments to hide the height from IE Mac. Is this what I'm supposed to use to get the box to fill 100% height? If so, I'm confused because I haven't gotten a simple height:100%; to work.

Do I instead need the min-height:100%;? What's the difference?

Thanks in advance!

Aaron

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 48 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Dynamic height box

Hi

I've done tons of browser testing for 100% height in css with standards mode set (i.e. with a valid doctype).

Of all the major (recent) browsers, only IE5.x Mac cannot do it. Worse, while IE for the PC needs height:100% set in the html tag, this blows the brains out of IE5.x Mac, hence it is commented out.

And so on, the bugs are there in Mozilla/Gecko browsers too, not correctly inheriting min-height inwards into a design. Hence all the hacking. and Safari isn't too happy either. But they can all be persuaded to give the appearance of full height. Curiously, IE6 is the easiest to get working!

I meant for you to ignore the content of the page I bookmarked for you. The actual css (ignoring all the css added for the graphics) is a very stable and reliable way to get full height across browsers.

Why not copy the whole page and adapt it to make it look like yours? It's easy to chop out the content I have in it. If you really want me to, I could code it for you quite quickly. PM me if you do.

Trevor

Aaron
Offline
Regular
Last seen: 14 years 50 weeks ago
Timezone: GMT-7
Joined: 2004-03-15
Posts: 29
Points: 0

Dynamic height box

I might HAVE to have your help Trevor.

Look at the page now and tell me if you see the navbox border extending the whole height. I've added the height: 100%; to that id and it isn't changing anything for me. I even tried to use min-height: 100%; just to be thourough and it didn't do anything either.

http://www.sugarfixdesign.com/testing/about.htm
CSS: http://www.sugarfixdesign.com/testing/css/styles.css

Am I implementing this too simply?

Sorry if I'm being dumb, but, as always, thanks for your help!

Aaron

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 48 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Dynamic height box

Hi

That didn't work!

I am working on something right now, it may be monday before I can look at it. PM me if you want me to do it.

Trevor

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 48 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Dynamic height box

ClevaTreva wrote:
I am working on something right now, it may be monday before I can look at it. PM me if you want me to do it.

Hi

I've just finished the other things I was doing. Sometimes things just go right first time Laughing out loud

I'll look at your page tomorrow afternoon (Sunday). It shouldn't take more than an hour. Might even do it tonight.

Trevor

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 48 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Dynamic height box

Hi

Hey ho, here you go:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<!-- The above DOCTYPE and html lines and the meta http-equiv line below the head are critical. DO NOT DELETE them -->
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Your Page Title Here</title>
<script type="text/javascript">
window.onload=function(){
  if( navigator.appVersion.indexOf('Mac')!=-1 && document.all){
    clearContainer("domfix"); /*** Pass the id of the container ***/
  }
  function clearContainer(theid){
    document.getElementById(theid).innerHTML+="<div class='cb'> </div>";
  }
}
</script>
<style type="text/css">
/******************************************
Copyright Notice: Parts of these notes are
(c) Owen Briggs @ www.thenoodleincident.com
(for the font css file) (c) Big John @
www.positioniseverything.net and (c) Paul
O'Brien @ www.pmob.co.uk, all of whom
contributed significantly to the design of
the css and html code.
All other content is (c) ClevaTreva Designs
******************************************/
/***XXXXXXXXXXXXXXX Primary layout rules XXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXX

To change many of the widths/heights requires that other certain values must
also be changed at the same time. For this reason, beside these critical
attributes (or nearby if comment hacks do not allow) are comments with the
calculations as to how to adjust them.

These guidance comments start with /*** and end with ***/

/***
You can delete these if you want, but do not delete MAC Hack comments (see
below).

To change the width of the entire layout, adjust the columns that make up the
total, remembering the borders. Remember, even one small mistake will degrade
or even break the layout, so be very careful!

For spacing within the cols, it's best to apply margins on content elements
inserted into the cols, because padding directly on those col elements will
change their widths, breaking the layout.

Certain hiding hacks have been used extensively in this layout, so here is a
quick explanation of them.

The Safari escape tab hack:
***************************

 (used on wrapper, and the 3 backgrounds for Moz
and Opera).

Puts an escape in front of a valid number in the style name to replace a
letter in that name, e.g. \65 is an e. A tab is then inserted (not a space).
The purpose of this hack is to hide some code from Safari. Unfortunately,
some other browsers (like IE) see it for what it should be (but NOT Safari),
and so we must undo the code for those browsers by other hacks.

The Tan hack:
*************

* html .anyelement {rules read only by IE/Win and IE/Mac}

The MAC hack:
*************

(first the active comment you are reading now must be
closed...) ***/

/* \*/

/* */

/***...Back in comment mode now. Anything between those two comment lines
will be hidden from IE/Mac. Don't use any comments within this hack or it will
close prematurely and IE/Mac will begin reading before it should.

The above two hacks are combined so as to feed rules only to IE/Win.

The Holly Hack:
***************

Proper use of backslash escape characters inside property names used in the
Holly hack can further segregate rules to be read by only IE6 from rules for
IE5.x/Win.

These hiding hacks, along with several other fixes, make possible this formerly
impossible layout. It is highly unlikely that new browsers will have any
problem with these valid hiding hacks, and Microsoft does not plan any browser
changes soon that would alter the proper operation of the layout.

The 100% height in the html and body styles makes the design full height. It
also breaks Moz because you should use min-height, but that doesn't work! Note
how these 100% heights are hidden from IE Mac with the MAC Hack, otherwise they
break it.

XXXXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXXX ***/
/*** the following styles and notes are (c) Copyright
Big John @ www.positioniseverything.net ***/
html,body,div,p,img{
  margin:0; /*** Do NOT set anything other than a left margin for the page
as this will break the design ***/
  padding:0;
  border:0;
}
html,body{
/* \*/
  height:100%;
/* Last height declaration hidden from Mac IE 5.x */
}
body{
  background:#FFFFFF;
  min-width:750px; /*** This is needed for moz. Otherwise, the header and footer will
slide off the left side of the page if the screen width is narrower than the design.
Not seen by IE. Left Col + Right Col + Center Col + Both Inner Borders + Both Outer Borders ***/
  text-align:center; /*** IE/Win (not IE/MAC) alignment of page ***/
  font-family: verdana, arial, helvetica, sans-serif;
  font-size:76%; /*** Don't change this setting. Make all other
font-sizes in ems ***/
  color:#000000;
}
.floatcontainer:after {
  content:;
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}
/* Holly Hack Targets IE Win only \*/
* html .floatcontainer{height:1%}
/* End Holly Hack */
.cb{clear:both;height:0} /*** for the DOM added div ***/
.safnonposabsposdiv:before { /*** to fix Safari abs pos div bug ***/
  height:1px;
  clear:both;
  overflow:hidden;
  margin-bottom:-1px;
}
.sa6	nonposabsposdiv:before {display:none} /*** to hide safari fix from other browsers ***/
* html .safnonposabsposdiv:before {display:none} /*** to hide safari fix from IE ***/
#fullheightcontainer{
  margin-left:auto; /*** Mozilla/Opera/Mac IE 5.x alignment of page ***/
  margin-right:auto; /*** Mozilla/Opera/Mac IE 5.x alignment of page ***/
  text-align:left; /*** IE Win re-alignment of page if page is centered ***/
  position:relative; /*** Needed for IE, othewise header and footer aren't contained
directly above and below the body ***/
  width:750px; /*** Needed for Moz/Opera to keep page from sliding to left side of
page when it calculates auto margins above. Can't use min-width. Note that putting
width in #fullheightcontainer shows it to IE and causes problems, so IE needs a hack
to remove this width. Left Col + Right Col + Center Col + Both Inner Border + Both Outer Borders ***/
/* \*/
  height:100%;
/* Last height declaration hidden from Mac IE 5.x */
/*** Needed for Moz to give full height design if page content is
too small to fill the page ***/
}
.wrapper{
  min-height:100%; /*** moz uses this to make full height design. As this .wrapper
is inside the #fullheightcontainer which is 100% height, moz will not inherit heights
further into the design inside this container, which you should be able to do with
use of the min-height style. Instead, Mozilla ignores the height:100% or
min-height:100% from this point inwards to the center of the design - a nasty bug.
If you change this to height:100% moz won't expand the design if content grows.
Aaaghhh. I pulled my hair out over this for days. ***/
/* \*/
  height:100%;
/* Last height declaration hidden from Mac IE 5.x */
/*** Fixes height for non moz browsers, to full height ***/
}
.wrapp\65	r{ /*** for Opera and Moz (and some others will see it, but NOT Safari) ***/
  height:auto; /*** For moz to stop it fixing height to 100% ***/
}
/* \*/
* html .wrapper{
  height:100%;
}
/* Last style with height declaration hidden from Mac IE 5.x */
/*** Fixes height for IE, back to full height,
from esc tab hack moz min-height solution ***/
.outer{
  z-index:1; /*** Critical value for Moz/Opera Background Column colors fudge to work ***/
  position:relative; /*** IE needs this or the contents won't show outside the parent container. ***/
  margin-left:525px; /*** Critical left col dimension value = left col width ***/
  width:225px; /*** Critical left and right col/divider dimension value (moves inversly) = center col width ***/
/* \*/
  height:100%;
/* Last height declaration hidden from Mac IE 5.x */
/*** Needed for full height inner borders in Win IE ***/
}
.float-wrap{
  width:225px; /*** Critical left and right col/divider dimension value (moves inversly) = Center Col Width ***/
  margin-right:-1px; /*** Static fix, doesn't change ***/
  float:left;
}
.left{
  width:526px; /*** Critical left col/divider dimension value = Left Col Width + 1px + One Internal Border Width ***/
  float:left;
  position:relative; /*** IE needs this or the contents won't show
outside the parent container. ***/
  margin-left:-525px; /*** Critical left col/divider dimension value = left col width + one internal border width ***/
}
*>html .left{width:525px;} /*** Fix only for IE/Mac = left col width + one internal border width ***/
.container-left{
  width:525px; /*** Critical left col dimension value = left col width - 1px ***/
}
/*** Static fixes ***/

/*** a Note on the Holly hack: if IE/Win shows bugs it's a good idea to apply the height:1%
     hack to different elements and see if that fixes the problem. Sometimes it may be
     necessary to use "position: relative;" on certain elements, but it's hard to tell in
     advance which elements will need such fixes. ***/
/*** This is a STATIC fix for IE5/Win at the largest text size setting. ***/
/* \*/
* html .left{margin-right:-3px;}
/* Above style hidden from Mac IE */
/*** All the IE fixes that are inside seperate "Mac-hacks" may be grouped within
     just one Mac-hack for convenience if desired. However, each fix must come
     later than the rule it is fixing or the fix itself will be overridden. ***/
.center{
  width:225px; /*** Set to = center col width ***/
  float:right;
/* \*/
  margin-left:-1px;
/* Hidden from IE-mac */
}
/*** clearheader heights are made from header height + borders +
any sidebar box height, less any sidebar intrusion.
Similar calcs for footers. ***/
#clearheadercenter{
  height:237px; /*** needed to make room for header in center column ***/
  overflow:hidden;
}
#clearheaderleft{
  height:237px; /*** needed to make room for header in left column ***/
  overflow:hidden;
}
#clearfootercenter{
  height:17px; /*** needed to make room for footer in center column ***/
  overflow:hidden;
}
#clearfooterleft{
  height:17px; /*** needed to make room for footer in left column ***/
  overflow:hidden;
}
#footer{
  z-index:1; /*** Critical value for Moz/Opera Background Column colors fudge to work ***/
  position:absolute;
  clear: both;
  width:750px; /*** Set to Left Col + Right Col + Center Col + Both Inner Borders +
Both External Borders ***/
  height:17px; /*** = Bottom Margin + One Outer Border + body to footer divider depth +
subfooter1 height + any other subfooter heights ***/
  overflow:hidden;
  margin-top:-17px; /*** negative height ***/
}
.subfooter{
  overflow:hidden;
}
#subfooter1{
  text-align:center;
  height:17px; /*** sub-footer row height ***/
}
#header{
  z-index:1; /*** Critical value for Moz/Opera Background Column colors fudge to work ***/
  position:absolute;
  top:0px;
  width:750px; /*** Set to Left Col + Right Col + Center Col + Both Inner Borders +
Both External Borders ***/
  height:227px; /*** = Top Margin + One Outer Border + header to body divider depth +
subheader1 height + any other subheader heights ***/
  overflow:hidden;
}
.subheader{
  overflow:hidden;
}
#subheader0{
  height:0px; /*** sub-header row height ***/
}
#subheader1{
  height:145px; /*** sub-header row height ***/
}
#subheader2{
  background: url(water.gif) no-repeat;
  text-align: center;
  color: #ffffff;			
  height:65px; /*** sub-header row height ***/
}
#subheader3{
  padding-right: 10px;
  text-align: right;
  height:17px; /*** sub-header row height ***/
}
#leftpagecopy p{
  font-size:1.2em;
  line-height:1.3em;
  margin:0 10px;
  text-align:justify;
}
#navbox {
  font-size:1.1em;
  line-height:1.3em;
  border: 1px solid;
  text-align: right;
  padding: 10px;
  margin-right:10px;
}
#mainnav a,#mainnav a:link,#mainnav a:visited,#mainnav a:hover{
  color:#FFFFFF;
  text-decoration:none;
  font-size:1em;
  font-weight:bold;
  font-family:"times new roman",serif;
}
#mainnav a:hover{color:#99CCFF}
a,a:link{
  color:#993333;
  text-decoration:underline;
}
a:visited{
  color:#000000;
  text-decoration:underline;
}
a:hover{
  color:#000000;
  text-decoration:none;
}
</style>
<!--[if IE]>
<style type="text/css">
/*** The rule below prevents long urls from widening floated cols and breaking the layout
     in IE. It is not W3C valid, but if placed within a "Conditional comment" it will be hidden
     from all user agents other than IE/Win, and thus validate. This fix fails in IE5/Win.
     http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp ***/
.outer{word-wrap:break-word;}
</style>
<![endif]-->
</head>
<body>
<div id="fullheightcontainer">
  <div class="wrapper">
    <div class="outer">
      <div class="float-wrap">
        <div class="center">
          <div id="clearheadercenter"></div>
            <div id="zleftpagecopy">
              <div id="navbox">
                <a href="http://www.sugarfixdesign.com/testing/membership.htm">Membership Information</a>
                <a href="http://www.sugarfixdesign.com/testing/application.doc">Download Application</a>
              </div>
            </div>
          <div id="clearfootercenter"></div>
        </div>
        <div class="left">
          <div id="clearheaderleft"></div>
          <div class="container-left">
            <div id="leftpagecopy">
              <p>The Hood Canal Association (HCA), formerly The Associated Businesses 
              of the South Shore of Hood Canal (ABSSHC), was established with the 
              intent of promoting our local businesses and the community of Union and 
              the entire Hood Canal area. We have been an active organization in the
              development of numerous cooperative marketing efforts that promote our
              unique area and services to people throughout the state of Washington.
              Operating a small business in a small community makes it difficult to
              allocate the resources for marketing and advertizing, but with the
              combined strength of the association we are able to take advantage of
              tools that are no available to us as individuals.</p>
            </div>
          </div>
          <div id="clearfooterleft"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="header">
    <div id="subheader1" class="subheader">
      <a href="http://www.sugarfixdesign.com/testing/index.htm"><img src="banner.jpg" alt="Click here to return home"></a>
    </div>
    <div id="subheader2" class="subheader">
      <div id="mainnav">
        <a href="http://www.sugarfixdesign.com/testing/index.htm">Home</a> • 
        <a href="http://www.sugarfixdesign.com/testing/events.htm">Events</a> •  
        <a href="http://www.sugarfixdesign.com/testing/lodging.htm">Lodging</a> •  
        <a href="http://www.sugarfixdesign.com/testing/food_wine.htm">Food &amp; Wine</a> •  
        <a href="http://www.sugarfixdesign.com/testing/activities.htm">Activities</a> •  
        <a href="http://www.sugarfixdesign.com/testing/services.htm">Services</a> •  
        <a href="http://www.sugarfixdesign.com/testing/shopping.htm">Shopping</a> • 
        <a style="color: rgb(153, 204, 255);">About HCA</a> •
        <a href="http://www.mapquest.com/maps/map.adp?city=union&amp;state=WA&amp;zip=98592&amp;country=us&amp;zoom=5">Directions</a> 
      </div>
    </div>
    <div id="subheader3" class="subheader">
      <img src="headerAbout.gif" alt="About the Hood Canal Association">
    </div>
  </div>
  <div id="footer" class="safnonposabsposdiv">
    <div id="subfooter1" class="subfooter">
      PO Box 301 Union, WA 98592 | <a href="http://www.sugarfixdesign.com/testing/contact.htm">Contact HCA</a>
      site by <a href="http://www.sugarfixdesign.com/" id="sugarfix">SugarFix Design</a>
    </div>
  </div>
</div>
</body>
</html>

I used it so the css is inline. Cut and past it to an external file. Assumes images in local directory.

You may want to play around with fonts etc. One curious thing I noticed was that the main text would not properly justify in IE, yet another IE bug? Looks fine in Moz. Notice the complete lack of boz hacks for IE5. They are not needed in this design as it is.

I didn't carry over all your styles. I DID correct your spelling mistakes Laughing out loud I condensed your link styles too.

In order to do this quickly, the main content is in my design's left column, and my design's center section contains your right nav area. In the fullness of time, I intend to work on my design to add more layouts which will get round this problem.

Trevor

Aaron
Offline
Regular
Last seen: 14 years 50 weeks ago
Timezone: GMT-7
Joined: 2004-03-15
Posts: 29
Points: 0

Dynamic height box

WOW Laughing out loud Thanks Trevor!

Aaron

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 48 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Dynamic height box

Aaron wrote:
WOW Laughing out loud Thanks Trevor!

Aaron

Hi,

Was it what you wanted?

Trevor

Aaron
Offline
Regular
Last seen: 14 years 50 weeks ago
Timezone: GMT-7
Joined: 2004-03-15
Posts: 29
Points: 0

Dynamic height box

Hi Trevor,

I actually just got a chance to pull up the page and look at it with the new code.

I hate to be the bearer of bad tidings but I must have miscommunicated what I was trying to do. I am looking for the solid border surrounding the #navbox to fill 100% height within the bounds of the main page container so it would always be the same height as the corresponding text.

It appears that you thought I wanted the footer on the bottom of the page, which is REALLY cool, just not quite what I was attempting. Please don't feel that your work was in vain, I'm logging all of the information for when I need the whole page at 100% height!

Aaron

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 48 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Dynamic height box

Hi Aaron

Do you want the navbox border to be the same height as the text, so that if the text doesn't fill the page, neither will the navbox, or do you want the navbox border to be full height, which if the text in the center is more than full height the navbox will match.

The latter option is easy to do with the code I gave you. The former will also work the same way, but by so doing you will lose full height when the content is minimal.

Let me know what you want, it will only take a few minutes to do. BTW, the navbox border can be almost as fancy as you want.

Trevor

Aaron
Offline
Regular
Last seen: 14 years 50 weeks ago
Timezone: GMT-7
Joined: 2004-03-15
Posts: 29
Points: 0

Dynamic height box

What I'm looking for is the navbox border to be the same height as the text (regardless of the text height) so both are balanced on the page...

I figure it should be as easy as using height: 100%; especially from what you said earlier but it doesn't seem to be so...

Quote:

I've done tons of browser testing for 100% height in css with standards mode set (i.e. with a valid doctype).

Of all the major (recent) browsers, only IE5.x Mac cannot do it.

Thanks again for all of your help and the time you've spent dealing with this!

Aaron

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 48 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Dynamic height box

Hi

Here you go. Took me about 15 minutes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<!-- The above DOCTYPE and html lines and the meta http-equiv line below the head are critical. DO NOT DELETE them -->
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Your Page Title Here</title>
<script type="text/javascript">
window.onload=function(){
  if( navigator.appVersion.indexOf('Mac')!=-1 && document.all){
    clearContainer("domfix"); /*** Pass the id of the container ***/
  }
  function clearContainer(theid){
    document.getElementById(theid).innerHTML+="<div class='cb'> </div>";
  }
}
</script>
<style type="text/css">
/******************************************
Copyright Notice: Parts of these notes are
(c) Owen Briggs @ www.thenoodleincident.com
(for the font css file) (c) Big John @
www.positioniseverything.net and (c) Paul
O'Brien @ www.pmob.co.uk, all of whom
contributed significantly to the design of
the css and html code.
All other content is (c) ClevaTreva Designs
******************************************/
/***XXXXXXXXXXXXXXX Primary layout rules XXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXX

To change many of the widths/heights requires that other certain values must
also be changed at the same time. For this reason, beside these critical
attributes (or nearby if comment hacks do not allow) are comments with the
calculations as to how to adjust them.

These guidance comments start with /*** and end with ***/

/***
You can delete these if you want, but do not delete MAC Hack comments (see
below).

To change the width of the entire layout, adjust the columns that make up the
total, remembering the borders. Remember, even one small mistake will degrade
or even break the layout, so be very careful!

For spacing within the cols, it's best to apply margins on content elements
inserted into the cols, because padding directly on those col elements will
change their widths, breaking the layout.

Certain hiding hacks have been used extensively in this layout, so here is a
quick explanation of them.

The Safari escape tab hack:
***************************

 (used on wrapper, and the 3 backgrounds for Moz
and Opera).

Puts an escape in front of a valid number in the style name to replace a
letter in that name, e.g. \65 is an e. A tab is then inserted (not a space).
The purpose of this hack is to hide some code from Safari. Unfortunately,
some other browsers (like IE) see it for what it should be (but NOT Safari),
and so we must undo the code for those browsers by other hacks.

The Tan hack:
*************

* html .anyelement {rules read only by IE/Win and IE/Mac}

The MAC hack:
*************

(first the active comment you are reading now must be
closed...) ***/

/* \*/

/* */

/***...Back in comment mode now. Anything between those two comment lines
will be hidden from IE/Mac. Don't use any comments within this hack or it will
close prematurely and IE/Mac will begin reading before it should.

The above two hacks are combined so as to feed rules only to IE/Win.

The Holly Hack:
***************

Proper use of backslash escape characters inside property names used in the
Holly hack can further segregate rules to be read by only IE6 from rules for
IE5.x/Win.

These hiding hacks, along with several other fixes, make possible this formerly
impossible layout. It is highly unlikely that new browsers will have any
problem with these valid hiding hacks, and Microsoft does not plan any browser
changes soon that would alter the proper operation of the layout.

The 100% height in the html and body styles makes the design full height. It
also breaks Moz because you should use min-height, but that doesn't work! Note
how these 100% heights are hidden from IE Mac with the MAC Hack, otherwise they
break it.

XXXXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXXX ***/
/*** the following styles and notes are (c) Copyright
Big John @ www.positioniseverything.net ***/
html,body,div,p,img{
  margin:0; /*** Do NOT set anything other than a left margin for the page
as this will break the design ***/
  padding:0;
  border:0;
}
body{
  background:#FFFFFF;
  min-width:750px; /*** This is needed for moz. Otherwise, the header and footer will
slide off the left side of the page if the screen width is narrower than the design.
Not seen by IE. Left Col + Right Col + Center Col + Both Inner Borders + Both Outer Borders ***/
  text-align:center; /*** IE/Win (not IE/MAC) alignment of page ***/
  font-family: verdana, arial, helvetica, sans-serif;
  font-size:76%; /*** Don't change this setting. Make all other
font-sizes in ems ***/
  color:#000000;
}
.floatcontainer:after {
  content:;
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}
/* Holly Hack Targets IE Win only \*/
* html .floatcontainer{height:1%}
/* End Holly Hack */
.cb{clear:both;height:0} /*** for the DOM added div ***/
.safnonposabsposdiv:before { /*** to fix Safari abs pos div bug ***/
  height:1px;
  clear:both;
  overflow:hidden;
  margin-bottom:-1px;
}
.sa6	nonposabsposdiv:before {display:none} /*** to hide safari fix from other browsers ***/
* html .safnonposabsposdiv:before {display:none} /*** to hide safari fix from IE ***/
#fullheightcontainer{
  margin-left:auto; /*** Mozilla/Opera/Mac IE 5.x alignment of page ***/
  margin-right:auto; /*** Mozilla/Opera/Mac IE 5.x alignment of page ***/
  text-align:left; /*** IE Win re-alignment of page if page is centered ***/
  position:relative; /*** Needed for IE, othewise header and footer aren't contained
directly above and below the body ***/
  width:750px; /*** Needed for Moz/Opera to keep page from sliding to left side of
page when it calculates auto margins above. Can't use min-width. Note that putting
width in #fullheightcontainer shows it to IE and causes problems, so IE needs a hack
to remove this width. Left Col + Right Col + Center Col + Both Inner Border + Both Outer Borders ***/
/*** Needed for Moz to give full height design if page content is
too small to fill the page ***/
}
.wrapper{
/*** Fixes height for non moz browsers, to full height ***/
  background:url(navboxsides.gif) repeat-y top right;
}
.wrapp\65	r{ /*** for Opera and Moz (and some others will see it, but NOT Safari) ***/
  height:auto; /*** For moz to stop it fixing height to 100% ***/
}
/*** Fixes height for IE, back to full height,
from esc tab hack moz min-height solution ***/
.outer{
  z-index:1; /*** Critical value for Moz/Opera Background Column colors fudge to work ***/
  position:relative; /*** IE needs this or the contents won't show outside the parent container. ***/
  margin-left:525px; /*** Critical left col dimension value = left col width ***/
  width:225px; /*** Critical left and right col/divider dimension value (moves inversly) = center col width ***/
}
.float-wrap{
  width:225px; /*** Critical left and right col/divider dimension value (moves inversly) = Center Col Width ***/
  margin-right:-1px; /*** Static fix, doesn't change ***/
  float:left;
}
.left{
  width:526px; /*** Critical left col/divider dimension value = Left Col Width + 1px + One Internal Border Width ***/
  float:left;
  position:relative; /*** IE needs this or the contents won't show
outside the parent container. ***/
  margin-left:-525px; /*** Critical left col/divider dimension value = left col width + one internal border width ***/
}
*>html .left{width:525px;} /*** Fix only for IE/Mac = left col width + one internal border width ***/
.container-left{
  width:525px; /*** Critical left col dimension value = left col width - 1px ***/
}
/*** Static fixes ***/

/*** a Note on the Holly hack: if IE/Win shows bugs it's a good idea to apply the height:1%
     hack to different elements and see if that fixes the problem. Sometimes it may be
     necessary to use "position: relative;" on certain elements, but it's hard to tell in
     advance which elements will need such fixes. ***/
/*** This is a STATIC fix for IE5/Win at the largest text size setting. ***/
/* \*/
* html .left{margin-right:-3px;}
/* Above style hidden from Mac IE */
/*** All the IE fixes that are inside seperate "Mac-hacks" may be grouped within
     just one Mac-hack for convenience if desired. However, each fix must come
     later than the rule it is fixing or the fix itself will be overridden. ***/
.center{
  width:225px; /*** Set to = center col width ***/
  float:right;
/* \*/
  margin-left:-1px;
/* Hidden from IE-mac */
}
/*** clearheader heights are made from header height + borders +
any sidebar box height, less any sidebar intrusion.
Similar calcs for footers. ***/
#clearheadercenter{
  height:238px; /*** needed to make room for header in center column ***/
  overflow:hidden;
}
#clearheaderleft{
  height:238px; /*** needed to make room for header in left column ***/
  overflow:hidden;
}
#clearfootercenter{
  height:26px; /*** needed to make room for footer in center column ***/
  overflow:hidden;
}
#clearfooterleft{
  height:26px; /*** needed to make room for footer in left column ***/
  overflow:hidden;
}
#footer{
  z-index:1; /*** Critical value for Moz/Opera Background Column colors fudge to work ***/
  position:absolute;
  clear: both;
  width:750px; /*** Set to Left Col + Right Col + Center Col + Both Inner Borders +
Both External Borders ***/
  height:26px; /*** = Bottom Margin + One Outer Border + body to footer divider depth +
subfooter1 height + any other subfooter heights ***/
  overflow:hidden;
  margin-top:-26px; /*** negative height ***/
}
.subfooter{
  overflow:hidden;
}
#subfooter1{
  background:#FFFFFF;
  text-align:center;
  height:17px; /*** sub-footer row height ***/
}
#subfooter2{
  background:#FFFFFF url(navbarline.gif) no-repeat top right;
  height:9px; /*** sub-footer row height ***/
}
#header{
  z-index:1; /*** Critical value for Moz/Opera Background Column colors fudge to work ***/
  position:absolute;
  top:0px;
  width:750px; /*** Set to Left Col + Right Col + Center Col + Both Inner Borders +
Both External Borders ***/
  height:238px; /*** = Top Margin + One Outer Border + header to body divider depth +
subheader1 height + any other subheader heights ***/
  overflow:hidden;
}
.subheader{
  overflow:hidden;
}
#subheader0{
  height:0px; /*** sub-header row height ***/
}
#subheader1{
  height:145px; /*** sub-header row height ***/
}
#subheader2{
  background: url(water.gif) no-repeat;
  text-align: center;
  color: #ffffff;			
  height:65px; /*** sub-header row height ***/
}
#subheader3{
  background:#FFFFFF;
  padding-right: 10px;
  text-align: right;
  height:27px; /*** sub-header row height ***/
}
#subheader4{
  background:#FFFFFF url(navbarline.gif) no-repeat top right;
  height:1px; /*** sub-header row height ***/
}
#leftpagecopy p{
  font-size:1.2em;
  line-height:1.3em;
  margin:0 10px;
  text-align:justify;
}
#navbox {
  font-size:1.1em;
  line-height:1.3em;
  text-align: right;
  padding: 10px;
  margin-right:10px;
}
#mainnav a,#mainnav a:link,#mainnav a:visited,#mainnav a:hover{
  color:#FFFFFF;
  text-decoration:none;
  font-size:1em;
  font-weight:bold;
  font-family:"times new roman",serif;
}
#mainnav a:hover{color:#99CCFF}
a,a:link{
  color:#993333;
  text-decoration:underline;
}
a:visited{
  color:#000000;
  text-decoration:underline;
}
a:hover{
  color:#000000;
  text-decoration:none;
}
</style>
<!--[if IE]>
<style type="text/css">
/*** The rule below prevents long urls from widening floated cols and breaking the layout
     in IE. It is not W3C valid, but if placed within a "Conditional comment" it will be hidden
     from all user agents other than IE/Win, and thus validate. This fix fails in IE5/Win.
     http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp ***/
.outer{word-wrap:break-word;}
</style>
<![endif]-->
</head>
<body>
<div id="fullheightcontainer">
  <div class="wrapper">
    <div class="outer">
      <div class="float-wrap">
        <div class="center">
          <div id="clearheadercenter"></div>
            <div id="zleftpagecopy">
              <div id="navbox">
                <a href="http://www.sugarfixdesign.com/testing/membership.htm">Membership Information</a>
                <a href="http://www.sugarfixdesign.com/testing/application.doc">Download Application</a>
              </div>
            </div>
          <div id="clearfootercenter"></div>
        </div>
        <div class="left">
          <div id="clearheaderleft"></div>
          <div class="container-left">
            <div id="leftpagecopy">
              <p>The Hood Canal Association (HCA), formerly The Associated Businesses 
              of the South Shore of Hood Canal (ABSSHC), was established with the 
              intent of promoting our local businesses and the community of Union and 
              the entire Hood Canal area. We have been an active organization in the
              development of numerous cooperative marketing efforts that promote our
              unique area and services to people throughout the state of Washington.
              Operating a small business in a small community makes it difficult to
              allocate the resources for marketing and advertizing, but with the
              combined strength of the association we are able to take advantage of
              tools that are not available to us as individuals.</p>
            </div>
          </div>
          <div id="clearfooterleft"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="header">
    <div id="subheader1" class="subheader">
      <a href="http://www.sugarfixdesign.com/testing/index.htm"><img src="banner.jpg" alt="Click here to return home"></a>
    </div>
    <div id="subheader2" class="subheader">
      <div id="mainnav">
        <a href="http://www.sugarfixdesign.com/testing/index.htm">Home</a> • 
        <a href="http://www.sugarfixdesign.com/testing/events.htm">Events</a> •  
        <a href="http://www.sugarfixdesign.com/testing/lodging.htm">Lodging</a> •  
        <a href="http://www.sugarfixdesign.com/testing/food_wine.htm">Food &amp; Wine</a> •  
        <a href="http://www.sugarfixdesign.com/testing/activities.htm">Activities</a> •  
        <a href="http://www.sugarfixdesign.com/testing/services.htm">Services</a> •  
        <a href="http://www.sugarfixdesign.com/testing/shopping.htm">Shopping</a> • 
        <a style="color: rgb(153, 204, 255);">About HCA</a> •
        <a href="http://www.mapquest.com/maps/map.adp?city=union&amp;state=WA&amp;zip=98592&amp;country=us&amp;zoom=5">Directions</a> 
      </div>
    </div>
    <div id="subheader3" class="subheader">
      <img src="headerAbout.gif" alt="About the Hood Canal Association">
    </div>
    <div id="subheader4" class="subheader">&nbsp;</div>
  </div>
  <div id="footer" class="safnonposabsposdiv">
    <div id="subfooter2" class="subfooter">&nbsp;</div>
    <div id="subfooter1" class="subfooter">
      PO Box 301 Union, WA 98592 | <a href="http://www.sugarfixdesign.com/testing/contact.htm">Contact HCA</a>
      site by <a href="http://www.sugarfixdesign.com/" id="sugarfix">SugarFix Design</a>
    </div>
  </div>
</div>
</body>
</html>

You will notice the navbar box isn't a box, if you look at the code. It was the only way I could think to do it.

IF the main content has less height then the navbar (unlikely) then the navbar box will have as much height as is necessary to fit the nav links.

As requested, this design is NOT full page height, although it is easy to make it so. You need two images files (used as backgrounds to the wrapper, subheader4 and subfooter2 divs, see attachments. They are tiny.

Trevor

Aaron
Offline
Regular
Last seen: 14 years 50 weeks ago
Timezone: GMT-7
Joined: 2004-03-15
Posts: 29
Points: 0

Dynamic height box

Thanks Trevor,

That's what I was trying to do. From my last post, how come it has to be so complex just to have 100% height? You had said that all browsers could handle it except for mac and yet 3-4 different hacks have to be sprinkled in to make it do a simple thing.

I'm just trying to sort out the hows and whys for next time...

Thanks again,

Aaron

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 48 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Dynamic height box

Hi Aaron

I gave you that code coz it was easiest for me to do, not ideal for you. I wanted to see if the effect was right.

So this may be what you want (it was saved as deleteme2, so the links to files are wrong for your server, you'll need to edit them):

css:

/* Page Layout ~ Hood Canal Association */

	html, body {
		padding: 0; /* For Opera [removes white space} */
	  border: 0; 
	}
	
	body {
		color: #000000;
		font-family: helvetica, verdana, arial, sans-serif;
		padding: 0;
		margin: 0; 
		font-size: 14px;
	/* page centering */
		margin-left: auto;
		margin-right: auto;
		width: 750px;
		text-align: center; /* IE workaround */
	}
	
	#banner {
	border: none;
  	width: 750px;
  	height: 145px;
	}
	
	#mainnav {
	background: url(water.gif) no-repeat;
  	width: 750px;
  	height: 65px;
	text-align: center;
	color: #ffffff;			
	}
	
	#header {
	height:36px;
  	width: 750px;
  	padding-right: 10px;
		text-align: right;
	/* Box Model Hack */
		voice-family: "\"]\"";
		voice-family: inherit;
		width: 740px;
	}
	
	#mainbody {
  	width: 750px;
	background:url(navboxsides.gif) repeat-y top right;
  	padding: 10px;
	/* Box Model Hack */
		voice-family: "\"]\"";
		voice-family: inherit;
		width: 730px;
	}
	
	#navbox {
		text-align: right;
		float: right;
		height: 100%;
		width: 211px;
		padding:0 10px;
	/* Box Model Hack */
		voice-family: "\"]\"";
		voice-family: inherit;
		width: 191px;
	}
	
	#imagebox {
		width: 211px;
		float: left;
	}
	
	#rightpagecopy {
		width: 505px;
  	text-align: justify;
		float: right;
	}

	#leftpagecopy {
		width: 505px;
  	text-align: justify;
		float: left;
	}

	#pagecopy {
		width: 730px;
  	text-align: justify;
	}

	#footer {
  	width: 750px;
		text-align: center;
	}
	
	#sugarfix {
	  font-family: times new roman, serif;
	}
	
	div p {
		margin-top: 0;
	}
	
	.clear { 
  	clear: both; 
/*** these next attributes are designed to keep the div height to 0 pixels high, critical for Safari and Netscape 7 ***/ 
  	height: 1px; 
  	overflow: hidden; 
  	margin-bottom: -1px; 
	} 
	* html .clear {
		display: none;
	} /*** stops IE browsers from displaying the clear div/br in the page, as these are for Moz/Opera and Safari only. If IE 5.x Win DID display these, the page is too high ***/
	
/* Anchor Attributes */	
	
	#mainnav a {
		color: #FFFFFF;
		text-decoration: none;
		font-size: 14px;
		font-weight: bold;
		font-family: times new roman, serif;
	}
										
	#mainnav a:link {
		color: #FFFFFF;
		text-decoration: none;
		font-size: 14px;
		font-weight: bold;
		font-family: times new roman, serif;
	}
										
	#mainnav a:visited {
		color: #FFFFFF;
		text-decoration: none;
		font-size: 14px;
		font-weight: bold;
		font-family: times new roman, serif;
	}
										
	#mainnav a:hover {
		color: #99CCFF;
		text-decoration: none;
		font-size: 14px;
		font-weight: bold;
		font-family: times new roman, serif;
	}

	a {
		color: #993333;
		text-decoration: underline;
	}
										
	a:link {
		color: #993333;
		text-decoration: underline;
	}
										
	a:visited {
		color: #000000;
		text-decoration: underline;
	}
										
	a:hover {
		color: #000000;
		text-decoration: none;
	}
	
#navboxlinelower,#navboxlineupper{
  overflow:hidden;
  background:#FFFFFF url(navbarline.gif) no-repeat top right;
  height:9px;
}
#navboxlineupper{
  height:1px;
}


/***body{ 
  font-family:verdana,arial,sans-serif; 
  font-size:76%; 
} Note: see http://www.thenoodleincident.com/ style the rest of font sizes in ems ***/

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" xml:lang="en" lang="en" id="page"><head><title>About the Hood Canal Association</title>

<link rel="stylesheet" type="text/css" media="screen" href="deleteme2_files/styles.css"><!-- Main Style Sheet -->
<link rel="stylesheet" type="text/css" media="print" href="deleteme2_files/print.css"><!-- Print Style Sheet -->

<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<meta name="description" content="The Hood Canal Association is a group of business people developing relationships in their community to promote small business.">
<meta name="keywords" content="www.visithoodcanal.com,www.hoodcanal.org,hood canal,washington,mason county,union,hoodsport, business,hood canal association,hca">
<meta name="copyright" content="© 2004 Hood Canal Association"><!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --></head>





<body>

	<!-- Banner Container -->
<div id="banner"><a href="http://www.sugarfixdesign.com/testing/index.htm"><img src="deleteme2_files/banner.jpg" alt="Click here to return home" border="0"></a></div>	
	<!-- Banner Container -->

	<!-- Main Site Navigation -->
<div id="mainnav">
  <a href="http://www.sugarfixdesign.com/testing/index.htm">Home</a> • 
  <a href="http://www.sugarfixdesign.com/testing/events.htm">Events</a> •  
  <a href="http://www.sugarfixdesign.com/testing/lodging.htm">Lodging</a> •  
  <a href="http://www.sugarfixdesign.com/testing/food_wine.htm">Food &amp; Wine</a> •  
  <a href="http://www.sugarfixdesign.com/testing/activities.htm">Activities</a> •  
  <a href="http://www.sugarfixdesign.com/testing/services.htm">Services</a> •  
  <a href="http://www.sugarfixdesign.com/testing/shopping.htm">Shopping</a> • 
  <a style="color: rgb(153, 204, 255);">About HCA</a> •
  <a href="http://www.mapquest.com/maps/map.adp?city=union&amp;state=WA&amp;zip=98592&amp;country=us&amp;zoom=5">Directions</a> 
</div>
	<!-- Main Site Navigation -->

	<!-- Page Headers -->
<div id="header"><img src="deleteme2_files/headerAbout.gif" alt="About the Hood Canal Association"></div>
	<!-- Page Headers -->

	<!-- Page Content -->
<div id="navboxlineupper">&nbsp;</div>
<div id="mainbody">
	<div id="navbox">
		<a href="http://www.sugarfixdesign.com/testing/membership.htm">Membership Information</a>
		<a href="http://www.sugarfixdesign.com/testing/application.doc">Download Application</a>
	</div>
	<div id="leftpagecopy">
              <p>The Hood Canal Association (HCA), formerly The Associated Businesses 
              of the South Shore of Hood Canal (ABSSHC), was established with the 
              intent of promoting our local businesses and the community of Union and 
              the entire Hood Canal area. We have been an active organization in the
              development of numerous cooperative marketing efforts that promote our
              unique area and services to people throughout the state of Washington.
              Operating a small business in a small community makes it difficult to
              allocate the resources for marketing and advertizing, but with the
              combined strength of the association we are able to take advantage of
              tools that are not available to us as individuals.</p>
	</div>
<div class="clear"> </div> 
</div>
	<!-- Page Content -->

	<!-- Page Footer -->
<div id="navboxlinelower">&nbsp;</div>
<div id="footer">
PO Box 301 Union, WA 98592 | <a href="http://www.sugarfixdesign.com/testing/contact.htm">Contact HCA</a>

site by <a href="http://www.sugarfixdesign.com/" id="sugarfix">SugarFix Design</a>
</div>
	<!-- Page Footer -->

</body></html>

Is that more what you wanted?

Trevor

Aaron
Offline
Regular
Last seen: 14 years 50 weeks ago
Timezone: GMT-7
Joined: 2004-03-15
Posts: 29
Points: 0

Dynamic height box

Yea, that's more what I expected.

I'm glad to know that it doesn't take so much to make it work. I was starting to consider going back to hacking tables... Wink

Thanks for your help Trevor!

Aaron

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 48 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Dynamic height box

Cool Tongue