I have a simple 3 column display
#div_left {
display:inline-block;
width:25%;
height:76%;
float:left;
text-align:center;
}
#div_middle {
display:inline-block;
width:45%;
height:76%;
margin:0 2.5% 0 2.5%;
float:left;
text-align:center;
}
#div_right {
display:inline-block;
width:25%;
height:76%;
float:left;
text-align:center;
}
I need to place my slideshow in middle column
#slideshow {
position:relative;
width:100%;
height:100%;
}
#slideshow > div {
position:absolute;
width:100%;
height:100%;
}
Because of the relative/absolute positions of #slideshow, #slideshow does not sit in the div #div_middle rendering #div_middle useless becuase it has not content and just collapses.
my html is:
<div id="div_middle">
<div id="slideshow">
<div>
<img src="image_1.png" width="100%"/>
</div>
<div>
<img src="image_2.png" width="100%"/>
</div>
<div>
<img src="image_3.png" width="100%"/>
</div>
</div
</div>
I've tried everything I know to try and solve this....
Please can someone point me in the right direction?
Many thanks.