I have to create a div over which there is a 3px border, and this boundary is positioned over the content in the div, how can I do this without knowing the size of the block?
An example is in the image below:
My code: https://codepen.io/pen/yLObXvv
HTML:
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-4">
<div class="case-study">
<div class="case-study-image">
<img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" class="img-fluid" alt="Intro image"/>
</div>
<div class="case-study-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</div>
CSS:
body {
background-color: #04142d;
}
.case-study {
color: #fff;
display: flex;
margin-top: 2rem;
flex-direction: row;
background-color: #0E53DD;
border-radius: 1rem;
overflow: hidden;
}
.case-study-image {
flex: 0 0 50%;
width: 50%;
}
.case-study-image img {
height: 100%;
max-height: 20rem;
object-fit: cover;
oject-position: 0 0;
}
.case-study-content {
flex: 0 0 50%;
padding: 1rem;
}
Please Use CSS ::after Selector with position: absolute
The coordinates of an absolute positioned element are relative to its parent. It is positioned automatically to the starting point (top-left corner) of its parent element.
body {
background-color: #04142d;
}
.case-study {
color: #fff;
display: flex;
margin-top: 2rem;
flex-direction: row;
background-color: #0E53DD;
border-radius: 1rem;
position:relative;
max-width:500px;
}
img {
max-width:100%;
}
.case-study-image {
flex: 0 0 50%;
width: 50%;
}
.case-study-image img {
height: 100%;
max-height: 20rem;
object-fit: cover;
oject-position: 0 0;
}
.case-study-content {
flex: 0 0 50%;
padding: 1rem;
}
.case-study:after {
content: '';
border: 3px solid yellow;
position: absolute;
width: calc(100% - 6px);
height: calc(100% - 6px);
border-radius: 5px;
right: -10px;
top: -10px;
}
<div class="case-study">
<div class="case-study-image"> <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" class="img-fluid" alt="Intro image"/> </div>
<div class="case-study-content">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<title>style</title>
<style>
div {
width: 200px;
height: 200px
background-color:white;
}
.move {
transform: (30px, 180px)
background: transparent;
border: 3px solid red;
}
</style>
</head>
<body>
<div class="move"></div>
<div></div>
</body>
</html>
you can use this and try to style it the way you want
Related
I am using only CSS and Flexbox to build a responsive page. I have a child element that should "overflow" outside the parent element as shown here:
<div class="container-hero">
<div class="hero-content">
<h1>Tech Challenge</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit </p>
</div>
<div class="hero-img">
<img src="assets/image-1.jpg">
</div>
</div>
CSS
.container-hero {
display: flex;
justify-content: flex-start;
align-items: center;
overflow: hidden;
position: relative;
margin: 40px 0;
}
.hero-img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
}
.hero-img img {
width: 100%;
height: auto;
}
.hero-content {
background-color: #D64C31;
color: #FFFFFF;
align-self: flex-end;
width: 50%;
position: absolute;
bottom:0;
left:0;
padding: 40px 60px;
}
Any help would be appreciated!
Like that?
<html>
<head>
<style>
.container {
background: #ccc;
width: 50%;
margin: 0 auto;
position: relative;
height: 700px;
}
.overflowing-element {
background: red;
width: 200px;
height: 200px;
position: absolute;
right: -200px;
top: 0;
}
</style>
</head>
<body>
<div class="container">
test
<div class="overflowing-element">
bla
</div>
</div>
</body>
</html>
Just works with fixed width of that overflowing element, or with JavaScript.
EDIT: You just edited your images and now I don't know really what you mean :D
I figure it out, thank you for your help!
My parent element had an overflow: hidden I disabled it and adjusted the child element as follows:
bottom: -40px
If you have any feedback or this is considered a bad practice please let me know. I am just starting out here :)
.container-hero {
display: flex;
justify-content: flex-start;
align-items: center;
/* overflow-x: hidden; */
position: relative;
margin: 40px 0;
}
.hero-img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
}
.hero-img img {
width: 100%;
height: auto;
}
.hero-content {
position:absolute;
background-color: #D64C31;
color: #FFFFFF;
width: 50%;
padding: 40px 60px;
bottom: -20px;
left:0;
}
</div>
<div class="container-hero">
<div class="hero-content">
<h1>Tech Challenge</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit </p>
</div>
<div class="hero-img">
<img src="https://source.unsplash.com/800x300">
</div>
</div>
The property you are looking for is CSS Position.
Reference: CSS Position
.parent{
width:250px;
height: 20px;
background: yellow;
position:relative;
}
.child{
width:80px;
height: 100px;
background: purple;
position:absolute;
bottom: 0;
right:0;
}
<div class="parent">
<div class="child"></div>
</div>
Use the CSS positioning properties.
.container-hero {
position: relative; /* creates the container for absolutely positioned children */
}
.hero-content {
position: absolute;
bottom: -20px; /* use this offset to align vertically */
left: 20px; /* use this offset to align horizontally */
background-color: #D64C31;
color: #FFFFFF;
width: 225px;
padding: 40px 60px;
}
<div class="container-hero">
<div class="hero-content">
<h1>Tech Challenge</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit </p>
</div>
<div class="hero-img">
<img src="https://via.placeholder.com/500x250.png?text=hero image">
</div>
</div>
In my application I have a centered main div. Now I would like to get my logo halfway on top of the DIV. As shown in the picture:
I got this working, however, when my screensize changes, the image is located on the wrong place.
<div class="is-vertical-center">
<div class="box">
<div class="text-center">
<img class="img-on-top" src="assets/logo.png">
</div>
<div class="router-outlet">
<div class="pure-g">
<div class="pure-u-1-1">
<h5>Start</h5>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1-1">
<p>
Welcome Lorem ipsum
</p>
</div>
</div>
</div>
</div>
</div>
CSS:
.is-vertical-center {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.box {
background-color: $color-ts-main-flat;
border: 1px solid $color-ts-main-border;
border-radius: 4px;
max-width: 30%;
padding: 20px;
}
.text-center {
text-align: center !important;
}
.img-on-top {
top:0;
margin-top:5%;
position:absolute;
right: 50%;
}
.router-outlet {
flex: 1 0 100px;
background-color:blue;
/* stretch element immediately following the router-outlet element within the same parent element.
* This is the element injected by angular (Assumption)
*/
router-outlet + * {
height: 100%;
width: 100%;
}
}
I made a fiddle, can someone point me in the right direction?
https://jsfiddle.net/x78a3oyj/
Thanks in advance.
add transform3d the the child element
.img-on-top {
top: 0;
transform: translate3d(-50%, -50%, 0);
position: absolute;
left: 50%;/*change to left*/
width: 60px; /*set a width*/
background: hsl(106, 100%, 34%);
}
then on the parent element, set position relative
.box {
background-color: $color-ts-main-flat;
border: 1px solid $color-ts-main-border;
border-radius: 4px;
max-width: 30%;
padding: 20px;
position: relative;/*add this*/
background: hsl(0, 100%, 50%);
margin-top: 3rem;
}
you here is the final code:
.is-vertical-center {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.box {
background-color: $color-ts-main-flat;
border: 1px solid $color-ts-main-border;
border-radius: 4px;
max-width: 30%;
padding: 20px;
position: relative;
background: hsl(0, 100%, 50%);
margin-top: 3rem;
}
.text-center {
text-align: center !important;
}
.img-on-top {
top: 0;
transform: translate3d(-50%, -50%, 0);
position: absolute;
left: 50%;
width: 60px;
height: 60px;
background: hsl(106, 100%, 34%);
}
.router-outlet {
flex: 1 0 100px;
background-color:blue;
/* stretch element immediately following the router-outlet element within the same parent element.
* This is the element injected by angular (Assumption)
*/
router-outlet + * {
height: 100%;
width: 100%;
}
}
<div class="is-vertical-center">
<div class="box">
<div class="text-center">
<img class="img-on-top" src="assets/logo.png">
</div>
<div class="router-outlet">
<div class="pure-g">
<div class="pure-u-1-1">
<h5>Start</h5>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1-1">
<p>
Welcome Lorem ipsum
</p>
</div>
</div>
</div>
</div>
</div>
You can use this code - top image
body {
margin: 0;
}
.is-vertical-center {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.box {
background-color: $color-ts-main-flat;
border: 1px solid $color-ts-main-border;
border-radius: 4px;
max-width: 30%;
padding: 20px;
}
.text-center {
text-align: center !important;
}
.img-on-top {
top: 10px;
margin-top: 0;
position: absolute;
right: 50%;
}
.router-outlet {
flex: 1 0 100px;
background-color: blue;
/* stretch element immediately following the router-outlet element within the same parent element.
* This is the element injected by angular (Assumption)
*/
}
.router-outlet+* {
height: 100%;
width: 100%;
}
<div class="is-vertical-center">
<div class="box">
<div class="text-center">
<img class="img-on-top" src="assets/logo.png">
</div>
<div class="router-outlet">
<div class="pure-g">
<div class="pure-u-1-1">
<h5>Start</h5>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1-1">
<p>
Welcome Lorem ipsum
</p>
</div>
</div>
</div>
</div>
</div>
I have 3 column grid with images using flexbox. The issue I encountered is how to properly put smaller image in the middle column to the bottom and the center text vertically in the rest space using flexbox.
I have very ugly solution, which quite unresponsive, so I sure the is better solution for this. Read some articles and watch 3 video courses about flexbox, but didn't found a case with such situation.
Also tried to make smaller image absolute, but then I couldn't center text vertically as I wanted.
Would be grateful for any suggestions.
.container{
max-width: 90%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
img {
width: 100%;
height: 100%;
display: block;
}
.fe2{
flex: 1;
text-align: center;
}
.flex-cont-inner {
display: flex;
flex-flow: column;
height: 100%;
}
.flex-cont-inner img {
height: initial;
}
.message{
font-size: 2.3vw;
margin: 0 auto;
}
.message p {
color: blue;
font-size: 2vw;
max-width: 80%;
margin: 0 auto;
padding: 34.5% 0px;
}
.author{
position: relative;
}
.author:after{
content: 'ANONYMUS';
position: absolute;
font-size: 1vw;
color:red;
top: 140%;
}
<div class="container">
<div class="fe2">
<img src="http://lorempixel.com/output/nightlife-h-c-500-700-3.jpg" alt="">
</div>
<div class="fe2 no-end">
<div class="flex-cont-inner">
<div class="message">
<p>Lorem ipsum dolor sit amet, consecte adipng elit. Voluptas doloremque dig<span class="author">nissimos </span>repreh!</p>
</div>
<img src="http://lorempixel.com/output/city-q-c-500-200-4.jpg" alt="">
</div>
</div>
<div class="fe2">
<img src="http://lorempixel.com/output/nightlife-h-c-500-700-2.jpg" alt="">
</div>
</div>
You need to use margin-top: auto; in both your message and your image. There's a really good explanation by Michael_B here about the use of auto margins with flexbox.
jsFiddle
CODE SNIPPET:
.container {
max-width: 90%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
img {
width: 100%;
height: 100%;
display: block;
}
.fe2 {
flex: 1;
text-align: center;
}
.flex-cont-inner {
display: flex;
flex-flow: column;
height: 100%;
}
.flex-cont-inner img {
height: initial;
margin-top: auto;
}
.message {
font-size: 2.3vw;
margin-top: auto;
}
.message p {
color: blue;
font-size: 2vw;
}
.author {
position: relative;
}
.author:after {
content: 'ANONYMUS';
position: absolute;
font-size: 1vw;
color: red;
top: 140%;
}
<div class="container">
<div class="fe2">
<img src="http://lorempixel.com/output/nightlife-h-c-500-700-3.jpg" alt="">
</div>
<div class="fe2 no-end">
<div class="flex-cont-inner">
<div class="message">
<p>Lorem ipsum dolor sit amet, consecte adipng elit. Voluptas doloremque dig<span class="author">nissimos </span>repreh!</p>
</div>
<img src="http://lorempixel.com/output/city-q-c-500-200-4.jpg" alt="">
</div>
</div>
<div class="fe2">
<img src="http://lorempixel.com/output/nightlife-h-c-500-700-2.jpg" alt="">
</div>
</div>
I have a webpage where I would like all the elements fixed in place so that there are no scrollbars for the page as a whole. I have a header, a menu on the left side, and an area where a plot will appear and then directly below the plot should be a list.
There is a gap between the header and the plot area that I can't get rid of. I have the margins and padding already set to 0. Also, the plot should be taking up 60% of the room below the header and the list 40%, but neither are correct and both elements end well above the bottom of the page in the vertical.
html,
body {
margin: 0;
padding: 0;
}
.float {
width: 100%;
background-color: blue;
padding-top: 60px;
display: flex;
display: -webkit-flex;
}
.main_title {
width: 70%;
height: 60px;
display: flex;
display: -webkit-flex;
flex-wrap: nowrap;
flex-flow: column;
justify-content: center;
background-color: red;
}
.clock {
width: 30%;
height: 60px;
background-color: green;
}
.header {
display: -webkit-flex;
display: flex;
height: 60px;
position: fixed;
width: 100%;
background-color: red;
margin: 0;
}
.menu {
width: 130px;
flex: 0 0 130px;
background-color: yellow;
height: 100%;
position: fixed;
}
.column_main {
flex: 1;
background-color: purple;
padding-left: 130px;
float: right;
}
.plot-wrapper {
width: 100%;
background-color: brown;
height: 60%;
}
#list {
background-color: lightblue;
width: 100%;
height: 40%;
position: fixed;
}
<body>
<div class="header">
<div class="header">
<div class="main_title">title</div>
<div class="clock">time</div>
</div>
</div>
<div class="float">
<nav class="menu">
<p>menu</p>
</nav>
<div class="column_main">
<div class="plot-wrapper">
<p>plot wrapper</p>
</div>
<div id="list">
<p>list</p>
</div>
</div>
</div>
</body>
If I understood your right, the following is one way of doing it that does not involve using flex.
In the header, I use floats to place the two elements side by side.
I then use absolute positioning to create the .float panel, adjusting the top offset to set the top edge right below the header, and stretching it full width and to the bottom by setting all other offsets to zero.
I then use absolute positioning to place the .menu to the left, taking up the left 130px width of the block, and then simarly to create a the .column_main block such that it takes up the remainder of the space.
Within .column_main, I keep .plot-wrapper and #list as regular in-flow elements and set the heights to 60% and 40% respectively. I add overflow: auto so as to prevent any margins (on p elements for example) from collapsing and creating unwanted whitespace.
html, body {
margin: 0;
padding: 0;
}
.header {
height: 60px;
background-color: red;
overflow: auto;
}
.main_title {
float: left;
width: 70%;
height: 60px;
background-color: red;
}
.clock {
float: left;
width: 30%;
height: 60px;
background-color: green;
}
.float {
position: absolute;
left: 0;
right: 0;
top: 60px;
bottom: 0;
}
.menu {
background-color: yellow;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 130px;
}
.column_main {
position: absolute;
left: 130px;
right: 0;
top: 0;
bottom: 0;
background-color: purple;
}
.plot-wrapper {
overflow: auto;
background-color: brown;
height: 60%;
}
#list {
overflow: auto;
background-color: lightblue;
height: 40%;
}
<div class="header">
<div class="main_title">title</div>
<div class="clock">time</div>
</div>
<div class="float">
<nav class="menu">
<p>menu</p>
</nav>
<div class="column_main">
<div class="plot-wrapper">
<p>plot wrapper</p>
</div>
<div id="list">
<p>list</p>
</div>
</div>
</div>
I changed your code a bit but I was confused in your explanation, so I did this, If I am incorrect I apologize but hey I tried. :D
HTML:
<div id="page">
<header class="main-hdr">
<div>
<h1>Title</h1>
</div>
<div>00:00:00</div>
</header>
<main class="main-content">
<nav>
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</nav>
<section>
<h2>Plot</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
</p>
</section>
<aside>
<h3>Lists</h3>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</main>
</div>
CSS:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
* {
margin: 0;
padding: 0;
font-family: 'Open Sans', 'DejaVu Sans', sans-serif;
}
body {
text-align: center;
background-color: #fff;
color: #000;
font-size: 100%;
overflow: hidden; /*prevent scrollbars*/
}
header, main, section, aside, nav {
display: block;
}
#page,
.main-hdr {
width: 100%;
clear: both;
margin: 0 auto;
overflow: hidden;
}
.main-hdr {
display: flex;
}
.main-hdr div {
float: left;
}
.main-hdr div:first-child {
background-color: #aa0b6b;
width: 80%;
}
.main-hdr div:last-child {
width: 20%;
background-color: #20aa5c;
}
.main-content {
clear: both;
}
.main-content nav {
float: left;
width: 20%;
}
.main-content section {
width: 60%;
float: left;
}
.main-content aside {
width: 20%;
float: left;
}
RESULT:
EXAMPLE
Here's a plunker and a snippet below:
html,
body {
box-sizing: border-box;
font: 400 16px/1.5'Palatino Linotype';
width: 100vw;
height: 100vh;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0;
}
body {
color: #111;
background-color: lightblue;
font-variant: small-caps;
font-size: 1rem;
}
.shell {
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
.core {
width: calc(100% - 130px);
height: calc(100% - 60px);
background-color: blue;
left: 130px;
top: 60px;
position: fixed;
}
.title {
width: 70%;
line-height: 1;
vertical-align: central;
background-color: red;
position: fixed;
top: 14px;
}
.clock {
width: 30%;
height: 60px;
background-color: lime;
position: fixed;
right: 0;
top: 0;
}
header {
height: 60px;
width: 100%;
background-color: red;
top: 0;
left: 0;
z-index: 11;
position: fixed;
}
.menu {
width: 130px;
background-color: yellow;
height: calc(100% - 60px);
top: 60px;
left: 0;
position: fixed;
}
.plot {
width: calc(100% - 130px);
background-color: brown;
height: calc(60% - 30px);
top: 60px;
left: 130px;
position: fixed;
}
#list {
background-color: lightblue;
width: calc(100% - 130px);
height: calc(40% - 30px);
bottom: 0;
left: 130px;
padding: 20px;
position: fixed;
}
#list dd {
text-indent: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<section class="shell">
<header class="header">
<h1 class="title">title</h1>
<h3 class="clock">time</h3>
</header>
<nav class="menu">
<h3>Menu</h3>
</nav>
<main class="core">
<section class="plot">
<h2>plot wrapper</h2>
</section>
<dl id="list">
<dt>List Section</dt>
<dd>List Item</dd>
<dd>List Item</dd>
<dd>List Item</dd>
<dd>List Item</dd>
<dd>List Item</dd>
</dl>
</main>
</section>
</body>
</html>
I want to create the following layout:
where the blue block is an image and the red and green blocks contain vertically centered text. The container needs to have position:fixed, the image is sized dynamically so that its height is set to the height of the container and the red and green boxes are of equal height and fill the remainder of the container horizontally.
I initially tried using divs:
body {
padding: 0;
margin: 0;
border: 0;
}
.container {
height: 15vh;
width: 100vw;
position: fixed;
background-color: red;
}
.imgContainer {
height: 100%;
float: left;
}
.imgContainer img {
height: 100%;
}
.textContainer {
height: 100%;
background-color: yellow;
text-align: right;
display: table;
table-layout: fixed;
float: right;
}
.row1 {
height: 50%;
width: 100%;
display: table-row;
}
.row2 {
height: 50%;
background-color: blue;
display: table-row;
}
span {
display: table-cell;
vertical-align: middle;
}
<div class="container">
<div class="imgContainer">
<img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" />
</div>
<div class="textContainer">
<div class="row1">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div class="row2">
<span>More text.</span>
</div>
</div>
</div>
This worked fine for the image but I couldn't figure out how to get the red and green divs to fill the remaining width satisfactorily.
My second attempt was based around tables but, again, I don't seem to be able to get the widths correct:
body {
background-color: red;
padding: 0;
border: 0;
margin: 0;
}
div {
background-color: yellow;
height: 15vh;
width: 100vw;
position: fixed;
}
table {
height: 100%;
width: 100%;
background-color: blue;
border-collapse: collapse;
table-layout: fixed;
}
tbody {
height: 100%;
width: 100%;
background-color: purple;
}
tr {
height: 50%;
width: 100%;
background-color: green;
padding: 0;
}
tr:last-child {
background-color: yellow;
}
td {
height: 100%;
padding: 0;
white-space: nowrap;
}
td:last-child {
max-width: 100%;
}
img {
max-height: 100%;
display: block;
}
<div>
<table>
<tbody>
<tr>
<td rowspan="2">
<img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" />
</td>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</td>
</tr>
<tr>
<td>
More text.
</td>
</tr>
</tbody>
</table>
</div>
I have also had problems ensuring that both red and green sections remain at 50% of the total height, regardless of content.
How can I get either of these to work? Or is there a completely different approach that can work?
You don't say what your target market is, but since in most my work I only have to worry about the latest browser versions, this answer makes use of the new CSS flexbox. If you need compatibility with older browsers, see the 2nd set of code below.
body {
padding: 0;
margin: 0;
border: 0;
}
.container {
height: 15vh;
width: 100vw;
position: fixed;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.imgContainer {
height: 100%;
}
.imgContainer img {
height: 100%;
}
.textContainer {
height: 100%;
width: 100%;
}
.row1 {
background-color: red;
}
.row2 {
background-color: green;
}
.row1,
.row2 {
height: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
overflow: hidden;
}
<div class="container">
<div class="imgContainer">
<img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" />
</div>
<div class="textContainer">
<div class="row1">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div class="row2">
<span>More text.</span>
</div>
</div>
</div>
Below is a solution that works in older browsers, except IE9 and below where the text will not be properly centered vertically. If that's a concern, you might be able to find something that works on this page, but not knowing all your limitations, I was unable to select the right solution.
body {
padding: 0;
margin: 0;
border: 0;
}
.container {
height: 15vh;
width: 100vw;
position: fixed;
}
.imgContainer {
height: 100%;
float: left;
}
.imgContainer img {
height: 100%;
}
.textContainer {
height: 100%;
}
.row1 {
height: 50%;
background-color: red;
}
.row2 {
height: 50%;
background-color: green;
}
span {
right: 0; /* right-justify */
}
.row1 > span {
position: absolute;
top: 25%; /* put the top 25% down within .container - the first non-static ancestor element */
transform: translateY(-50%); /* nudge the line up half it's height */
}
.row2 > span {
position: absolute;
top: 75%;
transform: translateY(-50%);
}
<div class="container">
<div class="imgContainer">
<img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" />
</div>
<div class="textContainer">
<div class="row1">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div class="row2">
<span>More text.</span>
</div>
</div>
</div>