I am currently working on a grid layout consisting of 9 div tags, creating 3 rows with 3 divs in each row.
Within this grid, each div is supposed to have a background image, except for the second div in the second row. My main challenge lies in getting the divs on either side of the middle div to automatically adjust their heights based on the height of the middle div itself.
If anyone has any insights or solutions on how to achieve this, I would greatly appreciate it.
To better illustrate my issue, here is a link to the jsfiddle: http://jsfiddle.net/TZCj2/2/ - In the current setup, you can see that the adjacent divs do not dynamically adjust.
Thank you in advance for your help!
<head>
<style>
#top-left {
width: 25px;
height: 25px;
float: left;
}
#top-right {
width: 25px;
height: 25px;
float: right;
}
#top {
background-image: url(http://placehold.it/25x25);
background-repeat: repeat-x;
height: 25px;
}
#bottom-left {
width: 25px;
height: 25px;
float: left;
}
#bottom-right {
width: 25px;
height: 25px;
float: right;
}
#bottom {
background-image: url(http://placehold.it/25x25);
background-repeat: repeat-x;
height: 25px;
}
#left {
width: 25px;
float: left;
background-image: url(http://placehold.it/25x25);
background-repeat: repeat-y;
height: 100%;
min-height: 100%;
}
#right {
width: 25px;
float: right;
background-image: url(http://placehold.it/25x25);
background-repeat: repeat-y;
height: 100%;
min-height: 100%;
}
#middle {
padding: 25px;
padding-left: 50px;
padding-right: 50px;
min-height: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="content">
<div id="top-left"><img src="http://placehold.it/25x25" width="25" height="25"></div>
<div id="top-right"><img src="http://placehold.it/25x25" width="25" height="25"></div>
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div id="middle">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
<div id="bottom-left"><img src="http://placehold.it/25x25g" width="25" height="25"></div>
<div id="bottom-right"><img src="http://placehold.it/25x25" width="25" height="25""></div>
<div id="bottom"></div>
</div>
</body>