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 both boxes to be the hight of the one to the right with the most text.

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;

I hope you can help, thank you.

There are a couple ways around this. One method would be to have a div used as a column-container wrapper around the left and right columns. In your css, you can have a background image on this "column-container" that repeat-y. It won't make the left and right column be the same height but it will look like it.

Now the other method is to use javascript. It will make the left and right column equal. You will need to change the id's to match your the ones in your code:

var ddequalcolumns=new Object()
//Input IDs (id attr) of columns to equalize. Script will check if each corresponding column actually exists:
ddequalcolumns.columnswatch=["columnLeft", "columnRight", "mainBody"]

ddequalcolumns.setHeights=function(reset){
var tallest=0
var resetit=(typeof reset=="string")? true : false
for (var i=0; i<this.columnswatch.length; i++){
if (document.getElementById(this.columnswatch[i])!=null){
if (resetit)
document.getElementById(this.columnswatch[i]).style.height="auto"
if (document.getElementById(this.columnswatch[i]).offsetHeight>tallest)
tallest=document.getElementById(this.columnswatch[i]).offsetHeight
}
}
if (tallest>0){
for (var i=0; i<this.columnswatch.length; i++){
if (document.getElementById(this.columnswatch[i])!=null)
document.getElementById(this.columnswatch[i]).style.height=tallest+"px"
}
}
}

ddequalcolumns.resetHeights=function(){
this.setHeights("reset")
}

ddequalcolumns.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
}

ddequalcolumns.dotask(window, function(){ddequalcolumns.setHeights()}, "load")
ddequalcolumns.dotask(window, function(){if (typeof ddequalcolumns.timer!="undefined") clearTimeout(ddequalcolumns.timer); ddequalcolumns.timer=setTimeout("ddequalcolumns.re setHeights()", 200)}, "resize")

Hi, thx for the answer.

But I'm not sure I understand, I will tru the first method with the column-container. because I don't really understand much of javascript.

So do you meen just put the 2 boxes inside a container and give the boxes the same color as the container or what?

I've tried it now, how I thought you said, is it correct:

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

this is my css code:

#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;
    /*display:inline;*/
}
    
#column-container {
    background-color:#333366;
    width:1000px;
    float:left;
    background-repeat:repeat-y;
    }

and this is my html

<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>

 </div>

</div>

The easiest way to do this is with the faux columns method -- check our stickies or Google it.

[QUOTE=Kischi;1117157]Hi, thx for the answer.

But I'm not sure I understand, I will tru the first method with the column-container. because I don't really understand much of javascript.

So do you meen just put the 2 boxes inside a container and give the boxes the same color as the container or what?

I've tried it now, how I thought you said, is it correct:

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

this is my css code:

#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;
    /*display:inline;*/
}
    
#column-container {
    background-color:#333366;
    width:1000px;
    float:left;
    background-repeat:repeat-y;
    }

and this is my html

<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>

 </div>

</div>

You are really close. Lets just tweak the css a little. Lets see if I can give a very quick explanation of what I've changed in the code below. First you'll create an image of the background you'll repeat (attached). This image will be the background of your column-container and it will repeat-y. I also put the clear/overflow because you have floating elements. For #indexblog and #indexcontent, I just removed the background color as you won't need it anymore.
Try it out and see what you get. Hope this helps


#column-container {
background: url (your image path goes here) 0 0 repeat-y;clear: both;
overflow: hidden;
width:982px;
}

#indexblog {
border-top:#2175a5 solid 10px;
padding:10px 10px 10px 10px;
position:relative;
width:421px;
float:left;
margin-left:100px;
}

#indexcontent{
border-top:#2175a5 solid 10px;
padding:10px 10px 10px 10px;
display:inline;
position:relative;
width:421px;
float:left;
}

You will have to use javascript to adjust the heights, CSS can only push the parent container height

http://www.candsdesign.co.uk/article...eight-columns/

Or... you could use an easy jQuery plugin:
http://www.cssnewbie.com/equalheights-jquery-plugin/