Split screen into grid and align items relatively vertically and horizontally - html

Question

I need to create a fairly static page divided into regions with an image carousel on the right (hcentered and vcentered)
This needs to be very browser compatible, so flexbox is not really an option
Here is a mockup image of what I'm after:
Mockup
The Code I have thus far is as follows, but I can for the life of me not get the right hand image to be centered and middle aligned:
$(function() {
// var exits = ['fadeOut', 'fadeOutDown', 'fadeOutUpBig', 'bounceOut', 'bounceOutDown', 'hinge',
// 'bounceOutUp', 'bounceOutLeft', 'rotateOut', 'rotateOutUpLeft', 'lightSpeedOut', 'rollOut'];
// var entrances = ['fadeIn', 'fadeInDown', 'fadeInRight', 'bounceIn', 'bounceInRight', 'rotateIn',
// 'rotateInDownLeft', 'lightSpeedIn', 'rollIn', 'bounceInDown' ];
var exits = ['fadeOut'];
var entrances = ['fadeInRight'];
var photos = $('#photos'),
ignoreClicks = false;
$('.arrow').click(function(e, simulated) {
if (ignoreClicks) {
// If clicks on the arrows should be ignored,
// stop the event from triggering the rest
// of the handlers
e.stopImmediatePropagation();
return false;
}
// Otherwise allo this click to proceed,
// but raise the ignoreClicks flag
ignoreClicks = true;
if (!simulated) {
// Once the user clicks on the arrows,
// stop the automatic slideshow
clearInterval(slideshow);
}
});
// Listen for clicks on the next arrow
$('.arrow.next').click(function(e) {
e.preventDefault();
// The topmost element
var elem = $('#photos #innerdiv:last');
// Apply a random exit animation
elem.addClass('animated')
.addClass(exits[Math.floor(exits.length * Math.random())]);
setTimeout(function() {
// Reset the classes
elem.attr('class', '').prependTo(photos);
// The animation is complate!
// Allow clicks again:
ignoreClicks = false;
}, 10);
});
// Start an automatic slideshow
var slideshow = setInterval(function() {
// Simulate a click every 1.5 seconds
$('.arrow.next').trigger('click', [true]);
}, 1000);
});
/* https://tutorialzine.com/2013/02/animated-css3-photo-stack */
body {
/* overflow:hidden;*/
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
#photos {
/* margin:0 auto; */
/*position:relative; */
}
#photos .outerdiv {
position: relative;
}
#photos .middlediv {
/* position:absolute; */
/* display:inline-block; */
/* width:450px; */
/* height:450px; */
/* overflow:hidden; */
background-color: #fff;
z-index: 10;
border: 1px solid #aaa;
/* -webkit-animation-duration: 1s; */
-moz-animation-duration: 1s;
/* animation-duration: 1s; */
}
#photos .innerdiv {
/* position:absolute; */
/* top:0px; */
/* left:0px; */
/* right:0px; */
/* bottom:0px; */
width: 450px;
height: 450px;
background-size: cover;
background-position: center;
/*overflow:hidden;*/
/* width:400px; */
/* height:400px; */
position: absolute;
}
.lefttop {
grid-area: lefttop;
width: 50vw;
height: 33.3vh
}
.leftcenter {
grid-area: leftcenter;
width: 50vw;
height: 33.3vh
}
.leftbottom {
grid-area: leftbottom;
width: 50vw;
height: 33.3vh
}
.rightfull {
grid-area: rightfull;
width: 50vw;
}
.grid-container {
display: grid;
grid-template-areas: 'lefttop rightfull' 'leftcenter rightfull' 'leftbottom rightfull';
grid-gap: 1px;
background-color: #2196F3;
padding: 1px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 0px;
font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid-container">
<div class="lefttop">left top</div>
<div class="leftcenter">left center</div>
<div class="leftbottom">left bottom </div>
<div class="rightfull">
<div id="photos" class="outerdiv">
<div class="middlediv">
<div class="innerdiv" style="background-image:url(http://127.0.0.1:81/wordpress/wp-content/uploads/2018/08/20180823_132842-01-400x347.jpeg)"></div>
</div>
<div class="middlediv">
<div class="innerdiv" style="background-image:url(http://127.0.0.1:81/wordpress/wp-content/uploads/2018/07/20180806_162813-01-1-400x389.jpeg)"></div>
</div>
<div class="middlediv">
<div class="innerdiv" style="background-image:url(http://127.0.0.1:81/wordpress/wp-content/uploads/2018/08/20180820_153720-01-400x356.jpeg)"></div>
</div>
</div>
</div>
</div>
Ideally, I would want to use grid or table but it seems like table does not allow for vertical merging of cells.
IE10 and above needs to be supported.
The image in the carousel should be a percentage of the width or height of the right hand column to make it relatively responsive to different screen sizes.
I have used the photo carousel at https://tutorialzine.com/2013/02/animated-css3-photo-stack and modified the code and javascript slightly as I thought using divs would be easier than UL's and LI's, but the results are just about the same.
Any guidance on how to achieve this without too many dirty fixes would be very much appreciated!
In other words:
a simple page, divided into two equal columns.
The left column should have a logo and some links spaced vertically away from the middle horizontal line of the screen.
The right column should be half the screen width, and full screen height with the image carousel centered and middle of the column with responsive width and height.

Answer 1

here is a fiddle with your requirement, I was based on the mock image in your question, I hope this help you.
Here is the HTML:
<div class="grid-container">
<div class="lefttop">
<h1>
LOGO
</h1>
</div>
<div class="leftbottom">
<ul>
<li>
home
</li>
<li>
about
</li>
<li>
contact
</li>
</ul>
</div>
<div class="rightfull">
<div id="photos" class="outerdiv">
<div class="middlediv">
<img class="innerdiv" src="https://picsum.photos/200/300/?random">
</div>
<div class="middlediv">
<img class="innerdiv" src="https://picsum.photos/200/300/?random">
</div>
<div class="middlediv">
<img class="innerdiv" src="https://picsum.photos/200/300/?random">
</div>
</div>
</div>
</div>
And tht SCSS
/* https://tutorialzine.com/2013/02/animated-css3-photo-stack */
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
.grid-container {
overflow: hidden;
display: grid;
height: 100% !important;
grid-template-columns: repeat(2, 50%);
grid-template-rows: repeat(2, 50%);
background-color: #2196F3;
& > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 0px;
// font-size: 30px;
}
.lefttop, .leftbottom {
grid-column: 1;
}
.lefttop {
&::before, & > h1 {
display: inline-block;
vertical-align: bottom;
}
&::before {
content: '';
height: 100%;
}
grid-row: 1;
position: relative;
h1 {
font-size: 3rem;
font-weight: 100;
}
}
.leftbottom {
grid-row: 2;
ul {
margin: 1rem auto;
li {
list-style: none;
display: inline;
&:not(:first-child):not(:last-child)::before {
content: '-';
}
&:not(:first-child):not(:last-child)::after {
content: '-';
}
a {
text-decoration: none;
color: inherit;
}
}
}
}
.rightfull {
grid-column: 2 / 3;
grid-row: 1 / 3;
position: relative;
img {
top: 0;
left: 0;
padding: 1rem;
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
https://jsfiddle.net/cisco336/wpfzL03k/1/
Here is MS Edge screenshot
MS IE11 screenshot