Hi,
So, I had a look at your code.
There are a number of problems.
- Your mark-up is invalid. For example, you have two opening <body> tags and several unclosed <div> tags.
- I couldn't actually find where you are referencing any jQuery plugins. You define a "equalizeHeights " function at the top of your code, which is never called.
- You close the container div, before you open the content div. This explains why the other (pure CSS) method wouldn't work.
I couldn't actually find the specific jQuery plugin you mention, so I took the first one I found via Google: http://www.cssnewbie.com/equalheights-jquery-plugin/
And then I applied it to your mark-up.
This should do what you want:
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>
<title>Law of Attraction pick winning lottery numbers with psychiclotto.org</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="http://www.cssnewbie.com/download/jquery.equalheights.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.fn.equalHeights = function(minHeight, maxHeight) {
tallest = (minHeight) ? minHeight : 0;
this.each(function() {
if($(this).height() > tallest) {
tallest = $(this).height();
}
});
if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
return this.each(function() {
$(this).height(tallest).css("overflow","auto");
});
}
$(".equalize").equalHeights();
});
</script>
<style>
body {
height: 100%;
width: 100%;
font-family: Arial, sans-serif, Helvetica;
font-weight: bold;
line-height: 110%;
background-color: #190033;
margin: 0;
padding: 0;
}
#container {
width: 100%;
background: #190033;
}
#header {
height: 150px;
width: 100%;
background: url(http://www.psychiclotto.org/new2header.png) top left no-repeat, url(http://www.psychiclotto.org/trheader.jpg) top right no-repeat;
}
#centerheader {
position: absolute;;
margin-left: auto;
margin-right: auto;
padding-left:440px;
}
#aligncenter {
width:67%;
height: 15px;
border-top:6px double #B0C4DE;
}
#left {
color: #B266FF;
width: 20%;
float: left;
font-weight: bold;
font-size: 14px;
border-left: 4px double #B0C4DE;
padding-left: 5px;
}
#content {
background: url(http://www.psychiclotto.org/centerslice.jpg) top center repeat-y, url(http://www.psychiclotto.org/sparkle.gif) 100% 2% no-repeat;
float: left;
color: #B266FF;
width: 58%;
height: relative;
text-align: left;
font-weight: bold;
font-size: 14px;
}
#magic {
background-image: url(http://www.psychiclotto.org/smsparkle.gif);
background-repeat: no-repeat;
background-position: 10% 15%;
}
#cwords {
color: #B266FF;
margin-left: 35px;
margin-right: 35px;
margin-top: 0px;
font-weight: bold;
font-size: 14px;
}
#right {
border-right: 5px double #B0C4DE;
color: #B266FF;
width: 20%;
float: right;
font-weight: bold;
font-size: 14px;
}
#nav {
padding-top: 0px;
width: 160px;
height: 100%;
font-size: 14px;
text-align: center;
}
#centermass {
border-right: 3px double #FFD700;
border-left: 3px double #FFD700;
}
#footer {
width: 100%;
height: 140px;
position: relative;
bottom: 0;
background: url(http://www.psychiclotto.org/blfooter.jpg) bottom left no-repeat, url(http://www.psychiclotto.org/brfooter.jpg) bottom right no-repeat;
}
.clearfooter {
height: 0px;
clear: both;
}
h1 {
color: #CC99FF;
font-family: segoe script, Arial;
font-weight: bold;
font-size: 40px;
}
h2 {
color: #B0C4DE;
font-size: 17px;
font-weight: bold;
line-height: 110%;
font-family: Arial;
}
h3 {
color: #B0C4DE;
font-weight: bold;
font-family: segoe script;
sans-serif, segoe script;
font-size: 18px;
}
h4 {
color: #B0C4DE;
font-family: segoe script, Arial;
font-weight: bold;
}
a:link {
text-decoration: none;
color: #ffffff;
}
a:visited {
color: #ffffff;
}
a:hover {
color: #CC99FF;
}
a:active {
color: #01CDFF;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<center><div id="aligncenter"></div></center>
<div id="centerheader"><img src="http://www.psychiclotto.org/gradientflare.gif"></div>
</div><!--header-->
<div id="left" class="equalize">
<img src="http://www.psychiclotto.org/heart.png">
</div>
<div id="content" class="equalize">
<center><div class="aligncenter" style="width:220px;height:0;border-top:2px solid #CC99FF;font-size:0;">-</div></center>
<h1 style="text-align: center; padding-bottom: 60px;">The Law of Attraction</h1>
<div id="cwords" style="margin: 35px;">
<h2>WHAT IS IT ?</h2>
<p>So what is the law of attraction? And how will you be able to use it and apply it in your own life? The answer is plain and simple. The law of attraction states that whatever you think
about, you basically attract it. In other words, whatever your dominant thoughts are, it will always find its way and make its own manifestation. Now, if you are prone to thinking nothing
but negative thoughts, then you are guaranteed that you will be getting nothing but negative results as well. </p>
<br>
<h2>HOW DOES IT WORK?</h2>
<p>There are a growing number of resources and information on this topic, so the question is, what is the best book on the Law of Attraction? The answer to this is pretty
easy… obviously the best book on the Law of Attraction is "The Secret" (haha). Okay, so you have probably already read the secret, so where to go from here?</p>
<br>
<h2>GOOD READ :</h2>
<p><b>Everything</b> is made up of energy. The Universe attracts energy of the same frequency.</p>
<p>While the Law of Attraction is important to understand, there are other laws as well that can help you transform yourself to a higher level of consciousness. These two other laws are called
the Law of Association and the Law of Repetition. </p>
<br>
<h2>A LITTLE MORE :</h2>
<p>Do you recognize what your deep-seated subconscious influence on financial abundance is? Here is the single most effective way to understand what your vibrational equivalent to
money is. Take a gander at your bank accounts. What is your current situation with money? Your bank account will tell you the answer without fail. </p>
</div><!--cwords-->
</div><!--content-->
<div id="right" class="equalize">
<center>
<div id="nav">
<a href="index.html">HOME</a><br>
<a href="about.html">ABOUT</a><br>
<a href="chakras.html">CHAKRAS</a><br>
<a href="meditation.html">MEDITATION</a><br>
<a href="lawofattraction.html">LAW OF ATTRACTION</a>
</div>
<h3>Instant Psychic Energy Boost !</h3>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="JRCMY8SLUSGZA">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</center>
</div><!--right-->
</div> <!--container-->
<div class="clearfooter"></div>
<div id="footer">
<center style="padding-top:125px;">
<div class="aligncenter" align="center" style="width:63%;height:0;border-top:6px double #B0C4DE;"></div>
</center>
</div>
</body>
</html>
Please be aware however, that this is not a clean solution (just try resizing the browser window).
If you would prefer, I can show you how to do this in pure CSS.
Just let me know.
HTH
Reply With Quote
Originally Posted by storkfmny
Bookmarks