CSS for sophisticated two columns layout (text and images) - html

Question

I have been trying to write CSS for responsive two columns layout (text and images), but I am having hard time with that. Layout looks like this:
two column layout
Requirements:
Content within columns is generated dynamically based on the data from database (so the height of the columns is dynamic)
Columns must have equal width and height (height depends on content)
Content within columns must be horizontally and vertically aligned
Layout must be responsive, so when screen size is changed columns and content must resize accordingly without loosing the ratio and layout of images. In mobile screen the second column goes below the first one (width of the column is 90% of the screen)
Content position in layout could change, so text could be on the right column and images on the left column (configured in CMS). Such change must not affect layout at all
There may be more similar sections on the page, so the distance between them must not be too long and the content of one section cannot cover any other section
It must be displayed correctly on IE11
I have been playing with it for a while and it does not seem to work correctly for me. I have tried to play with position absolute and relative. Unfortunately, the problem is always with images. When I change the screen size two smaller images do not hold orignal position (they move to the left or right). I am not sure if my approach is good or not, I do not even know if something like this is possible in CSS (well, I could write a lot of media rules for different screen sizes, but I am looking for nicer solutions), I have never seen this images layout before. I would be very keen to know what the best approach is.
I created some code snippet in order to demonstrate the issue:
.section {
margin: 0;
display: block;
width: 100%;
height: auto;
padding: 0;
text-align: center;
}
.content-left {
position: relative;
display: inline-block;
width: 45%;
vertical-align: middle;
text-align: center;
float: left;
}
.content-right {
position: relative;
display: inline-block;
width: 45%;
vertical-align: middle;
text-align: center;
float: right;
}
.first-image-wrapper {
position: relative;
z-index: 1;
height: 10rem;
width: 10rem;
text-align: center;
margin: auto;
vertical-align: middle;
right: -2rem;
top: 7rem;
}
.content-image-1 {
vertical-align: middle;
border-radius: 0.2rem;
width: inherit;
height: inherit;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.second-image-wrapper {
position: relative;
right: -1rem;
bottom: 7rem;
border-radius: 0.2rem;
height: 8.4rem;
width: 8.4rem;
z-index: 4;
}
.content-image-2 {
max-width: 100%;
height: auto;
display: inline-block;
vertical-align: middle;
}
.third-image-wrapper {
position: relative;
bottom: 18rem;
right: -10rem;
border-radius: 0.2rem;
height: 5rem;
width: 5rem;
background-size: cover;
z-index: 5;
}
.content-image-3 {
max-width: 100%;
height: auto;
display: inline-block;
vertical-align: middle;
}
#media (max-width: 500px) {
.content-left, .content-right {
width: 100%;
display: block;
}
}
<div class="section">
<div class="content-left">
<div class="content-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Praesent sapien massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Praesent sapien massa
</p>
</div>
</div>
<div class="content-right">
<div class="first-image-wrapper">
<img class="content-image-1" src="https://i.postimg.cc/BtB3G5dz/P1000003.jpg" alt="Image 1">
</div>
<div class="second-image-wrapper">
<img class="content-image-2 " src="https://i.postimg.cc/SnJb8BJ0/P1000064.jpg" alt="Image 2">
</div>
<div class="third-image-wrapper">
<img class="content-image-3" src="https://i.postimg.cc/ykfzD16X/P1000071.jpg" alt="Image 3">
</div>
</div>
</div>
Any help would be appreciated.

Answer 1

display:flex works for a genuine IE11 (I run one) :
You could do :
.section {
align-items: center;
display: flex;
width: 100%;
}
.section>div {
width: 50%;
}
.content-right {
margin: auto;
}
img {
display: block;
margin: auto;
}
img:nth-child(1) {
width: 20%;
margin-left: 70%;
margin-bottom: -2rem;
}
img:nth-child(2) {
width: 45%;
margin-left: 10%;
position:relative;
}
img:nth-child(3) {
width: 50%;
margin: -2rem 0 0 40%;
;
}
#media (max-width: 500px) {
.section {
display: block;
}
.section>div {
width: auto;
}
}
<div class="section">
<div class="content-left">
<div class="content-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Praesent sapien massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur arcu erat, accumsan id
imperdiet et, porttitor at sem. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Praesent sapien massa
</p>
</div>
</div>
<div class="content-right">
<img class="content-image-1" src="https://i.postimg.cc/BtB3G5dz/P1000003.jpg" alt="Image 1">
<img class="content-image-2 " src="https://i.postimg.cc/SnJb8BJ0/P1000064.jpg" alt="Image 2">
<img class="content-image-3" src="https://i.postimg.cc/ykfzD16X/P1000071.jpg" alt="Image 3">
</div>
</div>
here is a jsbin that works and was made in IE11 https://jsbin.com/lemonopica/1/edit?html,css,output
If you don't fill okay with flex, you can use display:table and display:table-cell which allows vertical centering too , it is understood by every browsers. here is a table/table-cell demo https://jsbin.com/gecokurebe/1/edit?html,css,output