Is it possible to align the div elements in such a way that the first column element spans two rows, while the second column elements are stacked on top of each other using CSS tables?
Below is a snippet of my HTML code:
<html>
<head><link rel="stylesheet" type="text/css" href="core.css"></head>
<body>
<div id="wrapper">
<div class="specialsticky">
<img src="Hydrangeas.jpg" alt="first image">
</div>
<div class="specialsticky">
<img src="Chrysanthemum.jpg" alt="second image">
</div>
<div class="specialsticky">
<img src="Desert.jpg" alt="third image">
</div>
</div>
</body>
</html>
And here is the corresponding CSS code:
#wrapper {
display: table;
width: 1024px;}
div.specialsticky:nth-child(1){
display: table-cell;
border: 1px solid black;
vertical-align: middle;
width: 604px;
height: 447px;}
div.specialsticky:nth-child(1) img{
width: 604px;
height: 447px;}
div.specialsticky:nth-child(2){
display: table-cell;
}
div.specialsticky:nth-child(2) img{
width: 424px;
height: 222px;
}
div.specialsticky:nth-child(3){
display: table-cell;
}
div.specialsticky:nth-child(3) img{
width: 424px;
height: 222px;
}