moin,
ich habe ein Problem mit Divs:
ich habe mehrer Divs, die neben einander liegen.
in der Mitte ist ein Div, dessen größe sich an den Inhalt anpasst.
wie kann ich jetzt das machen, dass die anderen Divs, die daneben liegen, gleich hoch sind wie der Div in der Mitte, also wo der Inhalt ist?
ich habe das mit Java script gemacht:
aber ich würde es gerne nur mit Css haben ...
hier noch mein Code:
css:
html :
ich habe ein Problem mit Divs:
ich habe mehrer Divs, die neben einander liegen.
in der Mitte ist ein Div, dessen größe sich an den Inhalt anpasst.
wie kann ich jetzt das machen, dass die anderen Divs, die daneben liegen, gleich hoch sind wie der Div in der Mitte, also wo der Inhalt ist?
ich habe das mit Java script gemacht:
Code:
...
function make()
{
var height = document.getElementById('main_middle').offsetHeight;
document.getElementById('left').style.height = height+'px';
document.getElementById('left_main').style.height = height+'px';
document.getElementById('left_right').style.height = height+'px';
document.getElementById('right').style.height = height+'px';
}
</script>
<body onload="make();">
...aber ich würde es gerne nur mit Css haben ...
hier noch mein Code:
css:
Code:
#main
{
width: 800px;
left: 50%;
right: 50%;
margin: auto;
}
#left
{
width: 54px;
height:30px;
left: 0px;
right: 746px;
float:left;
background-image:url(img/left.jpg);
background-repeat:repeat-y;
}
#left_main
{
width: 85px;
float:left;
height:30px;
}
#left_right
{
width: 9px;
height:30px;
float:left;
background-image:url(img/middle.jpg);
background-repeat:repeat-y;
}
#main_middle
{
width: 629px;
float:left;
background-image:url(img/closed_club_top.jpg);
background-position: bottom right;
background-repeat:no-repeat;
}
#right
{
width: 23px;
height:30px;
left: 779px;
float:right;
background-image:url(img/right.jpg);
background-repeat:repeat-y;
}
HTML:
<div id="main">
<div id="left"></div>
<div id="left_main"></div>
<div id="left_right"></div>
<div id="main_middle">
<p>adsfasdf</p>
<p>sad</p>
<p>f</p>
<p>sd</p>
</div>
<div id="right"></div>
</div>
