2 Div tags always same hight

Question

kischi 0 Junior Poster in Training

13 Years Ago

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

javascript

2 Contributors
6 Replies
175 Views
3 Days Discussion Span
Latest Post 13 Years Ago Latest Post by kischi

All 6 Replies

AleMonteiro 238 Can I pick my title?

13 Years Ago

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 13 Years Ago by AleMonteiro because: duplicated post => please delete

AleMonteiro 238 Can I pick my title?

13 Years Ago

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.

Reply to this topic

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.

kischi 0 Junior Poster in Training · Answer 1 · 2010-12-10T14:39:39+00:00

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>

AleMonteiro 238 Can I pick my title? · Answer 2 · 2010-12-10T22:33:41+00:00

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>

kischi 0 Junior Poster in Training · Answer 3 · 2010-12-13T16:53:00+00:00

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.

kischi 0 Junior Poster in Training · Answer 4 · 2010-12-13T17:42:24+00:00

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.

2 Div tags always same hight

Recommended Answers Collapse Answers

All 6 Replies

Recommended Answers