Member Avatar for kischi

Hi I'm tryng to make two boxes on my page always the same hight, no matter how much text is inside one of them.

So the boxes will always be the hight of the box with the most text.

you can see what I meen here:

http://wearecrunch.dk/test-globeaid/

I would wan't the two boxes to be the hight of the one to the left with the most text.

At first I thought it could be done in css, but I was told that I needed javascript to do it. And I don't have so much experience with javascript, but I can try :)

this is my css:

#indexcontent{
	background-color:#336699;
	border-top:#2175a5 solid 10px;
	padding:10px 10px 10px 10px;	
	display:inline;
	position:relative;
	width:421px;
	float:left;
}
	
#indexblog {
	background-color:#3333FF;
	border-top:#2175a5 solid 10px;
	padding:10px 10px 10px 10px;	
	position:relative;
	width:421px;
	float:left;
	margin-left:100px;
}

and this is my html:

<div id="indexcontent">dwqdwqf<br>
 dnjkwlka<br>
 dsadsa<br>
 daDASDS<br>
 dsadsadas<br></div>
 <div id="indexblog">dsadfw<br>
 few<br>
 fe<br>
 wf
 ew
 few
 f
 ew
 few
 few
 </div>

I hope someone can help me with how to use javascript to what I wanna do?

Thank you

  • 2 Contributors
  • 6 Replies
  • 175 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by kischi
Member Avatar for AleMonteiro

Hi, you should use JQuery to make it easier.

<script type="text/javascript" src="jquery.js"></script>

With JQuery the folliwing script should work:

// Tell the browser to execute fixHeights when the document is ready
$("document").ready(fixHeights);

function fixHeights()
{
	// Get elements reference
	var content = $("#indexcontent"); 
	var blog = $("#indexblog");
	
	
	if ( content.height() > blog.height() ) // Compare the heights
	{
		blog.height(content.height());
	}
	else
	{
		content.height(blog.height()) ;
	}
}

http://jquery.com/

It should work but i recommend you to study a little about javascript, it can be very usefull.

Edited by AleMonteiro because: duplicated post =&gt; please delete
Member Avatar for AleMonteiro

Hi, you should use JQuery to make it easier.

<script type="text/javascript" src="jquery.js"></script>

With JQuery the folliwing script should work:

// Tell the browser to execute fixHeights when the document is ready
$("document").ready(fixHeights);

function fixHeights()
{
	// Get elements reference
	var content = $("#indexcontent"); 
	var blog = $("#indexblog");
	
	
	if ( content.height() > blog.height() ) // Compare the heights
	{
		blog.height(content.height());
	}
	else
	{
		content.height(blog.height()) ;
	}
}

http://jquery.com/

It should work but i recommend you to study a little about javascript, it can be very usefull.

Member Avatar for kischi

Hi thx for the answer.
So now I tried to do that, but it still doesn't work?
I was thinking if there shouldn't be a = somewhere.

Like, so it will be

if content hight is bigger than blogs hight

blogs hight should be = content hight

and vice versa, or am I mistaken?
I might be ;)

But why wouldn't it work, this is my whole html and jquery code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css">
<script type="text/javascript" src="jquery.js">


// Tell the browser to execute fixHeights when the document is ready

$("document").ready(fixHeights);

function fixHeights()

{

// Get elements reference

var content = $("#indexcontent");
var blog = $("#indexblog");

if ( content.height() > blog.height() ) // Compare the heights
{
blog.height(content.height());
}
else
{
content.height(blog.height()) ;
#
}
#
}


</script>


</head>


<body>





<div id="column-container">

 <div id="indexcontent">dwqdwqf<br>
 dnjkwlka<br>
 dsadsa<br>
 daDASDS<br>
 dsadsadas<br></div>
 <div id="indexblog">dsadfw<br>
 few<br>
 fe<br>
 wf
 ew
 few
 f
 ew
 few
 few
 </div>

</div>




</body>
</html>
Member Avatar for AleMonteiro

Hi, normally it should have an = yes, but using JQuery we use methods to set values. And in methods, the value is passed in ();

Just to be explict, the jquery.js needs to be on the same folder as the html.

Here's the working example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<LINK REL=StyleSheet HREF="style.css" TYPE="text/css">

<style>
	#indexcontent{
	background-color:#336699;
	border-top:#2175a5 solid 10px;
	padding:10px 10px 10px 10px;	
	display:inline;
	position:relative;
	width:421px;
	float:left;
}
	
#indexblog {
	background-color:#3333FF;
	border-top:#2175a5 solid 10px;
	padding:10px 10px 10px 10px;	
	position:relative;
	width:421px;
	float:left;
	margin-left:100px;
}

</style>

<script type="text/javascript" src="jquery.js"></script>

<script>


// Tell the browser to execute fixHeights when the document is ready

$("document").ready(fixHeights);

function fixHeights()
{
	// Get elements reference

	var content = $("#indexcontent");
	var blog = $("#indexblog");

	if ( content.height() > blog.height() ) // Compare the heights
	{
		blog.height(content.height());
	}
	else
	{
		content.height(blog.height()) ;
	}
}


</script>


</head>


<body>


<div id="column-container">

 <div id="indexcontent">dwqdwqf<br>
 dnjkwlka<br>
 dsadsa<br>
 daDASDS<br>
 dsadsadas<br></div>
 <div id="indexblog">dsadfw<br>
 few<br>
 fe<br>
 wf
 ew
 few
 f
 ew
 few
 few
 </div>

</div>




</body>
</html>
Member Avatar for kischi

Well, now I tried to actually copy your code and paste it in, to see if it would work on mine, but it still didn't work.

Are you saying that I should create a new file that is called jquery.js and put some code in there?
And then place the file in the same folder.

Because now I just have a index.htm and a style.css that is in the same folder, but it doesn't seem like my jquery code works.

Do you know what could still be wrong, thanks.

Member Avatar for kischi

Ok great now it actually works, I found out that I just had to download the jquery.js
THank alot :) it was a big help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.