Page is a not externally linkable
appi2 - 11:40 pm on Jul 3, 2008 (gmt 0)
erm.. if you take of the margin-bottom:-500px; It's quite useful for when your using database stuff and you can't be sure how high/long the text/img etc is going to be.. I know everybody keeps thinking 3col layout, but that's just one thing it could be used for. If you apply it to a horizontal <li> menu then if one of the <li> becomes two line (may be because the user increases text size or potrait/lanscape img) then all the li will match the height. Instead of the ugly one <li> sticking out. The way it collapses when the browser window is resized (no sticking) is also handy. Oh also on the choice of the height thing and 32768px (IE max padding). The person that originally came up with it still has the demo up and it fails in opera 9.5. See example below. I used 500px so the clever people (those who actually say what if) would learn ;) In normal use saying 10,000px should give you enough room and maybe protect against yet to come browsers, maybe. This will fail in Opera 9.5, also min/max height things to play with. .subcoll } <body> </div> anyhoo tis Just another way to paint with a hammer.
Whats the point.
padding-bottom:500px; it does that thing, and if you leave it on it does that thing ;)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Opera 9.5 fail</title>
<style type="text/css">
#wrapper {overflow:hidden;}
/*This will fail in opera 9.5 change 32768px to 32767px or lower (CTRL-f) and it works again
so its maybe best to pick a value thats high enough eg 10,000px
*/
#collA, #collB
{
padding-bottom: 32768px;
margin-bottom: -32768px;
float: left;
width: 200px;
margin-left: 20px;
/*Possible just incase it breaks insurance ?
max-height:500px;*/
}
{
padding-bottom: 32768px;
margin-bottom: -32768px;
background-color: lightblue;
/*If you were using the margin padiing thang you probably wouldn't need this
but just to show it works uncomment it (remember to make the 32768px lower first)
min-height:400px; */
</style>
</head>
<div id="wrapper">
<div id="collA">
<div class="subcoll">sdsdsdsd</div>
</div>
<div id="collB">
<div class="subcoll">sdsdsdsd<br>jdskj<br>dsjkhkjdh</div>
</div>
<br clear="left">
<div>Soooo low</div>
</body>
</html>