How do I get the image to repeat the correct height?

[damezumari]

I have three div blocks defined like this:

#left1
{
float: left;
background-color: white;
width: 184px;
margin-right: 4px;
text-align: left;
}

#left2
{
float: left;
background: url(images/barrav.gif) repeat;
width: 23px;
}

#left3
{
float: left;
background-color: white;
width: 573px;
margin-left: 4px;
}

The idea is to have the blocks displayed side by side. I do not know
the height of left1 and left3, but I want the image in left2 to be
repeated for the max height of left1 and left3. If I set the height in
left2 it will either be too short or too long.

Kind regards,

Jan Nordgreen

 

[SAM]

damezumari a écrit :

I have three div blocks defined like this:

#left1
{
float: left;
background-color: white;
width: 184px;
margin-right: 4px;
text-align: left;
}

#left2
{
float: left;
background: url(images/barrav.gif) repeat;
width: 23px;
}

#left3
{
float: left;
background-color: white;
width: 573px;
margin-left: 4px;
}

The idea is to have the blocks displayed side by side. I do not know
the height of left1 and left3, but I want the image in left2 to be
repeated for the max height of left1 and left3. If I set the height in
left2 it will either be too short or too long.

<script type="text/javascript">
function $(id) { return document.getElementById(id); }
function maxHeightDivs(divs) {
divs = divs.split(',');
var H = 0, ok=false;
for(var i=0; i<divs.length; i++)
if($(divs) &&
$(divs).offsetHeight &&
$(divs).offsetHeight>H ) {
H = $(divs).offsetHeight;
ok = true;
}
if(ok) {
for(var i=0; i<divs.length; i++) $(divs).style.height = H+'px';
}
else alert('this script is out :-(');
}
window.onload = function() {
maxHeightDivs('left1,left2,left3');
}
</script>



Variante :

<script type="text/javascript">
function $(id) { return document.getElementById(id); }
function maxHeightDivs() {
var H = 0, ok=false;
for(var i=0; i<arguments.length; i++)
if($(arguments) &&
$(arguments).offsetHeight &&
$(arguments).offsetHeight>H ) {
H = $(arguments).offsetHeight;
ok = true;
}
if(ok) {
for(var i=0; i<arguments.length; i++)
$(arguments).style.height = H+'px';
}
else alert('this script is out :-(');
}
window.onload = function() {
maxHeightDivs('left1', 'left2', 'left3');
}
</script>


not tested with IE

 

[damezumari]

Thank you!

I put your code just before </body> and it worked like a charm!

Kind regards,

Jan Nordgreen