Responsive full height two column website, image inside one column - html

Question

I need to create a website (two columns) where one column contains some text (vertical centered) and the other column contains a picture (sticky to bottom).
Both of them need to be responsive (so position: fixed is not an option for the image).
I tried to achieve this by using Bootstrap and the w3 responsive framework. But both of them seem unable to put a responsive image inside a column that is always stuck to the bottom.
Any tips on how I can achieve this layout while being responsive (Picture needs to resize etc)?

Answer 1

Here's a solution without using flex. It's completely responsive and can be scaled both horizontally and vertically.
body {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100vh;
overflow: hidden;
}
#column1 {
position: relative;
width: calc(50% - 4px);
height: calc(100% - 4px);
display: inline-block;
border: 2px solid black;
}
#column1 span {
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
padding: 10px;
}
#column2 {
position: relative;
top: -50%;
left: 50%;
width: calc(50% - 2px);
height: calc(50% - 4px);
display: inline-block;
border: 2px solid black;
border-left: none;
}
<div id="container">
<div id="column1">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum bibendum laoreet. Suspendisse eu mauris urna. Vestibulum vel blandit erat. Suspendisse egestas semper urna in convallis. Aliquam lobortis, leo nec pharetra semper, elit risus aliquet metus, non malesuada massa turpis tincidunt lectus. Fusce pellentesque metus ac lectus ultricies, et fermentum tellus fringilla.</span>
</div>
<footer id="column2"></footer>
</div>

Answer 2

Here's a quick example of how you can achieve it with flex.
/* Std */
body {
margin: 0;
width: 100%;
height: 100%;
}
/* Flex Classes */
.flex {
display: flex;
}
.flex--row {
flex-direction: row;
}
/* Column Classes */
.column {
position: relative;
min-height: 100vh;
}
.left-column {
flex: 0.7;
background: red;
}
.right-column {
flex: 0.3;
background: blue;
}
/* Picture */
#column-picture {
width: 100%;
height: inherit;
position: absolute;
bottom: 0;
}
<div class="flex flex--row">
<div class="column left-column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia auctor tincidunt. Sed a turpis et eros iaculis convallis quis in nisl. Donec fringilla auctor eros ut ultrices. Donec laoreet dui urna, ut pharetra neque molestie et. Ut sagittis diam a lacus euismod dignissim. Sed vulputate dui erat, at hendrerit ante commodo et. Sed gravida ex et est bibendum pretium. Aliquam a convallis dui. Maecenas magna velit, ultrices eu massa sit amet, dictum accumsan tellus. Maecenas eget placerat magna. Nullam mollis lacus tempor lorem tempor tincidunt. Aliquam erat volutpat.
</div>
<div class="column right-column">
<img id="column-picture" alt="Lion" src="https://cbs.umn.edu/sites/cbs.umn.edu/files/public/african_lion_king-wide.jpg"/>
</div>
</div>

Answer 3

Tell me what you think of this. #Mech
https://codepen.io/rickydam/pen/zdrmWX
HTML
<div class="left">
<div class="innerleft">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum bibendum laoreet. Suspendisse eu mauris urna. Vestibulum vel blandit erat. Suspendisse egestas semper urna in convallis. Aliquam lobortis, leo nec pharetra semper, elit risus aliquet metus, non malesuada massa turpis tincidunt lectus. Fusce pellentesque metus ac lectus ultricies, et fermentum tellus fringilla. Phasellus vel quam a sem elementum volutpat vel eget neque. Nam efficitur maximus risus, ac eleifend augue tempor rutrum. Fusce vehicula non lorem vitae blandit. Donec in scelerisque sem, quis congue velit.
</p>
</div>
</div><!--
--><div class="right">
<img src="http://www.uniwallpaper.com/static/images/Sunset-Village-Wallpaper_8I7ogbf.jpg">
</div>
CSS
.left {
width: 50%;
height: 100vh;
background-color: lightgray;
display: inline-block;
vertical-align: middle;
margin: auto;
}
.innerleft {
background-color: lightblue;
height: 100vh;
display: flex;
align-items: center;
}
.left p {
margin: 20px;
padding: 10px;
background-color: gray;
}
.right {
width: 50%;
height: 100vh;
background-color: slategray;
display: inline-block;
vertical-align: top;
position: relative;
}
.right img {
position: absolute;
bottom: 0;
max-width: 100%;
}