Hi
How can I make the div #suurkast to ingrease its height when the text in it gets longer?

#suurkast {
width: 400px;
height: 300px;
background-color: #CCC;
float: left;
}

the site

try

#suurkast {
width: 400px;
min-height: 300px;
background-color: #CCC;
float: left;
}

the !important rule will keep it auto for non-IE/Windows browsers, which is what you need for min-height to work.

*makes note of this*

thanks Vinnie

Thank you.
But now there is another problem. How can I make two divs, that are next to each other, ingrease their height at the same time. Confusing text, but hope you understand.

#suurkast {
width: 400px;
height: auto !important;
min-height: 300px;
background-color: #CCC;
float: left;
}
#kylgkast {
width: 200px;
height: auto !important;
min-height: 300px;
background-color: #666;
float: left;
}

When I put text in #suurkast and it gets longer, is it possible to make #kylgkast also to ingrease its height the same way?

Hi,

The only element that bases its height dependending on another element is a table-cell. So what you ask isn't an easy thing to do in css.

The easiest way to make two divs appear to grow together is to use a repeating background image on the outer that imitates one of the columns. You then just place your existing elements inside the outer (without background colours)

Otherwise you have to resort to complicated negative margin techniques (or 200px wide border techniques).

Here are some example from my 3 col demo that show repeating background image and a negative margin technique (no image required).

http://www.pmob.co.uk/temp/2column_simple_1.htm
http://www.pmob.co.uk/temp/2columnce...equalising.htm
http://www.pmob.co.uk/temp/2equalisingfloats2.htm

In your example the easiest solution would be to create a 200px x 5px image of the required background colur and repeat it down the y axis of a container that holds both the floats. You then just let the floats stretch the outer container as required and of course the repeating background image grows with it.

Paul