I am trying to make a simple responsive "about" page.
Everything works till I resize the browser to a smaller window.
HTML
<div id="content">
<div id="area-container">
<h1>about</h1>
<div id="textarea">
<p>My name is...[lorem200words]</p>
</div>
</div>
</div>
CSS
body {
margin: 0 auto;
overflow: hidden;
font-family: 'Share Tech Mono', monospace;
}
#content {
width: 100%;
height: 2457px;
background-image: url('../images/wallpaper.jpg');
}
#area-container {
display:inline-block;
margin-top: 50vh;
margin-left: 50vw;
transform: translate(-50%, -60%);
}
#media screen and (max-width:800px) {
body {
overflow-y: scroll;
}
#content {
width: 100%;
height: 100%;
background-image: url('../images/connected.png');
}
}
https://jsfiddle.net/a4uaquyp/3/
The problem is that the whole textarea div seems to jump out of the browser, when I add the overflow to the body it won't let me scroll up enough.
There's also for some reason a lot of excess space below.
I tried using media querys to somehow push the #content down a bit with margin-top and vw/vh, I can't really think of anything else.
The problem is your use of transform: translate(-50%, -60%), in combination with your margin-top: 50vh and margin-left: 50vw. While this offsets the content, it will overflow it if there is too much to display.
Instead, if you want to center a lot of content, I would recommend flexbox. This allows you to achieve your desired result with only a few lines of code:
#content {
display: flex;
align-items: center;
justify-content: center;
}
#area-container {
max-width: 50%;
}
This can be seen in the following:
#import url('https://fonts.googleapis.com/css?family=Share+Tech+Mono');
body {
margin: 0 auto;
overflow: hidden;
font-family: 'Share Tech Mono', monospace;
}
#content {
width: 100%;
background-image: url('../images/wallpaper.jpg');
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px; /* Just to give space at the bottom */
}
#area-container {
max-width: 50%;
}
#textarea {
background-color: #fff;
box-shadow: 0 0 3em #ccc;
border-radius: 10px;
padding: 10px;
}
#area-container h1 {
text-align: center;
text-transform: uppercase;
font-size: 5vw;
}
#area-container h1:before,
#area-container h1:after {
content: '-';
font-weight: normal;
}
#media screen and (max-width:800px) {
body {
overflow-y: scroll;
}
#content {
width: 100%;
height: 100%;
background-image: url('../images/connected.png');
}
#area-container h1 {
font-size: 40px;
}
}
<body>
<div id="content">
<div id="area-container">
<h1>about</h1>
<div id="textarea">
<p>y name is... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo odit repudiandae veritatis hic facere non aperiam sunt dolor, ut enim? Sunt tempora et saepe quae, optio fugiat, eaque corrupti dignissimos modi tenetur sint corporis
dolore. Harum sunt eligendi, facilis, quos obcaecati consequatur earum, qui molestiae ducimus inventore optio. Minus quas sed, fugit fuga culpa neque magni quisquam doloremque tempora ad, et quia possimus voluptatibus enim iusto esse omnis recusandae
in eos provident nobis totam aliquid. Iste fugit tenetur, odio voluptates impedit veritatis reiciendis. Enim eaque quod repudiandae velit eum, quo commodi, odio quasi quos laboriosam iusto dolores laborum sapiente tenetur nihil sunt, nam nostrum
at accusamus id facere magnam! Quibusdam sint, velit similique harum alias neque doloremque labore iste officia repellat quae dolorum suscipit ad nostrum eaque quisquam, amet voluptatibus, laborum sit quaerat dolorem sunt laudantium. Nam necessitatibus
repellendus ipsum officia nulla commodi. Eveniet amet fuga, dolores voluptas nemo impedit laudantium facere, eum iste officiis perspiciatis. Quae ipsa eligendi dolor laborum optio ipsam commodi temporibus sequi, adipisci nobis facere, iste deserunt
architecto rem odit ullam, tenetur fuga veniam. Sed maiores libero odio nostrum officia, dolores expedita quisquam asperiores eligendi ad soluta incidunt earum, vitae, omnis esse voluptatum perferendis ab commodi.</p>
</div>
</div>
</div>
</body>
Also note that you don't probably want to restrict the height of #content. I've removed the height: 2457px from my above snippet.
Related
Expected behavior (happens in Chrome):
If the window size is wide enough, there is space between left and right content without the grey background
If the window size is narrow, there's grey background on top and on the bottom of image
What happens in Firefox: When the window size is wide, there's grey background between left and right content
On #detail-image-container I've tried using display: inline-element and float: left, but neither worked. Display:table made it so that there's no space between left and right content, also the image overflows. Any suggestion on how to make the expected behavior work in Firefox?
The code can be viewed here: https://jsfiddle.net/7k3rtnom/1/
HTML:
<div id='page-container'>
<div id='detail-container-left'>
<div id='detail-image-container'>
<img id='detail-image'
src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/VAN_CAT.png/900px-VAN_CAT.png?20200421225150'
alt="cat" />
</div>
</div>
<div id='detail-container-right'>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et odio recusandae incidunt inventore quia consequuntur sapiente laudantium molestiae quaerat quae accusantium, sint esse, repudiandae, animi libero nostrum officia natus error necessitatibus optio. Harum, a? Pariatur aliquam beatae iusto voluptates adipisci unde accusamus dolor blanditiis quod maxime alias facere reiciendis nostrum quam sed earum, inventore saepe repellat suscipit. Molestiae dolores inventore, eos doloribus iure quam quas tenetur unde ex eligendi sed repudiandae labore facere dignissimos provident animi exercitationem illum est sint expedita ratione. Id nemo hic omnis ab ullam deserunt magnam at animi dignissimos, inventore exercitationem aliquid minima consequatur rem numquam.</p>
</div>
</div>
CSS:
#page-container {
width: 100vw;
padding: 2vw;
max-height: 100vh;
background-color: aquamarine;
display: flex;
}
#detail-container-left {
max-height: 100%;
width: 55%;
}
#detail-image-container {
width: -moz-fit-content;
width: fit-content;
block-size: fit-content;
height: 100%;
background-color: #3b3f3e;
display: flex;
align-items: center;
}
#detail-image {
max-width: 100%;
max-height: 100%;
aspect-ratio: 1/1;
align-self: center;
}
#detail-container-right {
width: 45%;
max-height: 100%;
background-color: white;
padding: 20px;
overflow-y: scroll;
}
Using HTML and CSS, I'm attempting to achieve a seemingly simply layout with three components : a stickied header, a stickied footer, and a middle area that is 100% of whatever space is left in the browser window. I'd also like my entire site to be centered horizontally.
I've searched for and applied various answers from this forum, but nothing seems to work once I start to apply new characteristics to the page.
I'd like to also absolute center what will be a horizontal table in the above-mentioned content area, as well as position elements in the header and footer -- But I can't seem to get the basics down. What am I doing wrong?
#site {
max-width: 1024px;
margin-left: auto;
margin-right: auto;
}
#header {
width: 1024px;
height: 120px;
display: table-cell;
vertical-align: middle;
background-color: aqua;
}
#content {
width: 1024px;
height: 100%;
vertical-align: middle;
background-color: red;
}
#footer {
width: 1024px;
height: 120px;
display: table-cell;
vertical-align: middle;
background-color: aqua;
}
.logo {
display: inline-block;
vertical-align: middle;
}
.item {
display: table-cell;
}
.copy {
font-size: 12pt;
font-family: Arial;
display: inline-block;
vertical-align: middle;
}
.l1nk {
display: inline-block;
vertical-align: middle;
}
.l2nk {
display: inline-block;
vertical-align: middle;
}
<div id="site">
<div id="header">
<img class="logo" src="Images/logo.png" alt="logo" height="60" width="195" />
</div>
<div id="content">
<img class="item" src="Images/item.png" alt="logo" height="150" width="150" />
</div>
<div id="footer">
<div class="copy">xoxo © xoxo </div>
<div class="l1nk">
<img src="Images/insta100.png" alt="instagram" height="25" width="25" />
</div>
<div class="l2nk">
<img src="Images/twttr100.png" alt="twitter" height="25" width="25" />
</div>
</div>
I'm new to this forum, and a novice programmer, so I'll roll with the punches. But I'd like a stronger foundation so that I can move forward with my code. Thanks so much
Personal I would use flexbox to accomplish this but an easy way to do it as well with out having to learn flexbox looks a little something like this
https://jsfiddle.net/kriscoulson/2fqu03b2/
this one has content in the content block
https://jsfiddle.net/kriscoulson/2fqu03b2/1/
HTML
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
width: 1024px;
height: 100%;
position: relative;
}
.header {
background-color: cyan;
height: 120px;
}
.content {
background-color: red;
height: calc(100% - 240px);
overflow: auto;
}
.footer {
width: 100%;
height: 120px;
background-color: cyan;
position: absolute;
bottom: 0;
}
<div class="container">
<div class="header"> header </div>
<div class="content"> content </div>
<div class="footer"> footer </div>
</div>
You can use the calc function in css to help determine the height since you know that the header is 120px and the footer is 120px we know that is 240px total that the content will not take up.
// EDIT
This is with the use of flexbox if you are trying to learn flexbox to do it
https://jsfiddle.net/kriscoulson/2fqu03b2/2/
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
width: 1024px;
height: 100%;
display: flex;
flex-direction: column;
}
.header {
background-color: cyan;
height: 120px;
}
.content {
background-color: red;
overflow: auto;
flex: 1;
}
.footer {
width: 100%;
height: 120px;
background-color: cyan;
justify-content: flex-end;
}
<div class="container">
<div class="header"> header </div>
<div class="content"> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus fugit atque magni quis at, voluptate consectetur voluptates laboriosam distinctio beatae quos sunt architecto? Quis nihil optio incidunt a, ad iure!</div>
<div>Obcaecati expedita maiores ab. Tempora alias culpa, error quasi, quia delectus. Ratione, sapiente, at repellendus aspernatur debitis nesciunt eum fuga quibusdam in, suscipit omnis minima vero error perspiciatis, eaque corrupti?</div>
<div>Ullam praesentium doloremque inventore! Similique dolor delectus, consequatur at doloremque quibusdam sed ullam officiis molestias dignissimos doloribus in obcaecati explicabo ipsum ducimus et error, atque. Itaque consequatur perspiciatis dignissimos eligendi!</div>
<div>Maxime natus asperiores autem nobis in dicta necessitatibus consequuntur et expedita architecto molestias veniam, voluptate adipisci corporis qui sed modi sunt saepe sapiente vel voluptatem placeat facere nihil repudiandae. Cumque?</div>
<div>Rerum quod asperiores reprehenderit itaque sunt repellat natus nostrum, modi exercitationem impedit odit adipisci voluptates, facilis eligendi eum ex accusamus tenetur omnis fugiat iste provident ipsa earum. Optio, culpa, repudiandae.</div>
<div>Quo amet ex obcaecati natus, nesciunt accusamus eius laudantium magni id. Dolorum mollitia ab nam saepe excepturi, sapiente quisquam ducimus, perspiciatis obcaecati modi qui, sit laborum vero vitae cumque sequi!</div>
<div>Repudiandae laborum ducimus totam! Neque aliquam alias necessitatibus praesentium numquam fuga totam inventore quis ab tempore aliquid dolore, similique voluptatem ipsam nisi earum ea quidem dolor, optio quibusdam? Sed, corrupti.</div>
<div>Culpa a quos, explicabo adipisci pariatur impedit obcaecati consectetur aut maxime architecto eos facere ex voluptate provident iste blanditiis sed laboriosam magni aspernatur esse corrupti quasi quod! Officiis corrupti, voluptatibus.</div>
<div>Optio sunt ipsam, et esse libero consequatur maiores illum nihil ad asperiores sed rem soluta sapiente quia nobis voluptatem, velit pariatur sint non aperiam, nostrum. Dolorum officiis, amet tenetur odio?</div>
<div>Culpa dicta in soluta, cum, sapiente natus atque, vitae, laudantium ipsam dolorem obcaecati ad quibusdam. Accusantium consequatur sit odit minima, omnis nihil unde pariatur. Distinctio doloremque earum, deserunt doloribus culpa.</div>
<div>Doloribus nobis, minima animi. Rerum magni hic dicta iste, laborum similique, sed corrupti accusamus ad quam assumenda ab consectetur suscipit nostrum. Sapiente aliquid, voluptatibus eius optio modi tenetur, unde iure.</div>
<div>Impedit, dicta, atque nesciunt quos laboriosam facilis, nihil assumenda officiis omnis reiciendis iste quisquam asperiores eveniet ad corrupti error voluptatum consectetur velit neque. Minima distinctio, corporis expedita eius sapiente cumque?</div>
<div>Repellendus tempora rem corporis ullam soluta est veritatis, itaque! Quo fugit dicta minus obcaecati minima repellendus numquam, ipsam non eligendi porro exercitationem nesciunt vel similique nemo necessitatibus dolorem dolorum id?</div>
<div>Ad obcaecati voluptas nobis veniam explicabo ut atque eaque itaque, magni sed, veritatis totam ea, repellendus in quia iure soluta suscipit aliquam? Adipisci fugit ipsum delectus nisi vitae, veritatis ducimus.</div>
<div>Dolorem inventore facere doloremque quod excepturi. Quo nostrum non quaerat pariatur. Pariatur necessitatibus deleniti ea dolores ut sequi saepe sint nulla. Minima harum explicabo voluptate sunt, adipisci quisquam delectus distinctio.</div>
<div>Neque, numquam libero tempora harum accusantium tempore veniam reprehenderit ea ratione, delectus alias molestias reiciendis eos cumque labore nulla quasi aliquam qui eaque accusamus dolor iste sed veritatis? Maxime, cum!</div>
<div>Reiciendis veritatis recusandae aliquid eos laudantium culpa, consectetur aspernatur voluptate expedita? Explicabo, quisquam! Alias mollitia velit nesciunt, tempore ipsum distinctio, iusto, quidem dolor odio consequatur, ipsa iste. Repellendus veritatis, quas?</div>
<div>Quos omnis repudiandae, corrupti consequuntur culpa. Magnam aperiam, ad accusantium consequuntur. Nemo iure ab temporibus molestias et nesciunt eum excepturi magni, ipsum quae, molestiae eaque reprehenderit voluptatem! Fugit, praesentium, beatae!</div>
<div>Sit officia, quasi veritatis sint inventore odit consequatur iusto et ex sequi nihil quisquam praesentium, quos neque eum. Atque recusandae dolorum illum iusto consectetur dolores maiores blanditiis! Libero, explicabo officiis?</div>
<div>Ratione repudiandae ad officia quas nemo eos molestias quasi, perferendis facere, aspernatur. Aliquid nobis est dolor natus soluta harum veniam enim deserunt sint. Unde corrupti magni nobis, non a, necessitatibus.</div> </div>
<div class="footer"> footer </div>
</div>
I'll go with the flex option while i was waiting for a feed back about it. ...
header,
footer {
background: tomato;
min-height: 15vh;/* any height is fine actually, mind some room for main if small window ... header& footer should not be covering the entire window */
display: flex;/* to dispatch children */
flex-direction: column;/* not in a row ! */
}
main {
background: turquoise;
flex: 1;/* fill up entire space */
overflow: auto;/* if space too small, let me scroll */
display: flex;/* to easy center content */
flex-direction: column;/* lets behave as block container */
}
div {
margin: auto;/* flex children will center on both axis , an easy one !*/
}
body {
max-width: 1024px;/* so it can shrink beloww , else remove the max- prefix */
height: 100vh;/* window's height */
margin: 0 auto;
display: flex;
flex-direction: column;
}
main:hover div:after {
display: block;
content: 'test';
height: 200vh;
}
<header>
<div>
<h1>header</h1>
</div>
</header>
<main>
<div>main, hover me to make me taller and scroll</div>
</main>
<footer>
<div>footer </div>
</footer>
for the display table-layout, you should start from body :
html, body {
height:100%;
margin:0;
}
body {
width:1024px;
margin:auto;
display:table;
}
header,footer,main {
display:table-row;
}
header>div,main>div,footer>div {
display:table-cell;
vertical-align:middle;
}
main {
height:100%;
background:turquoise;
}
footer,header {
height:120px;
background:tomato;
}
<header>
<div>
<h1>header</h1>
</div>
</header>
<main>
<div>main content, i will not scroll, i will push the footer</div>
</main>
<footer>
<div>footer </div>
</footer>
So I have a fixed div with title and image below the title, and I want to then have another div, in the flow immediately under the fixed div. The fixed div with title and image will change size as the browser width changes, up to a maximum width of 700px. As the fixed div with image changes size the div containing text under the fixed div should maintain a a relative position below the bottom of the image.
I've tried implementing a wrapper around the fixed div, and also tried margin-top for the div containing the text but no matter what I try the text flows under the fixed div.
Any help on what I'm doing wrong would be much appreciated! This is what I currently have:
html, body {
height: 100%;
width:100%;
}
.container {
width: 100%;
margin: 0 auto;
max-width: 700px;
}
.title-wrapper {
width: 100%;
position: fixed;
}
.title {
width:100%;
max-width: 700px;
}
.image {
width: 100%;
}
.image img {
width:100%;
}
.text {
text-align: center;
}
h2 {
text-align: center;
background-color: grey;
width: 100%;
}
h3 {
text-align: center;
background-color: green;
width: 100%;
max-width: 700px;
}
<body>
<div class="container">
<div class="title-wrapper">
<div class="title">
<h2>Planes</h2>
<div class="image">
<img src="https://images.pexels.com/photos/47044/aircraft-landing-reach-injection-47044.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" alt="Plane1">
<!-- <img src="https://images.pexels.com/photos/40753/military-raptor-jet-f-22-airplane-40753.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" alt="Plane2">
<img src="https://images.pexels.com/photos/164646/pexels-photo-164646.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" alt="Plane3"> -->
</div>
</div>
</div>
<div class="text">
<div>
<h3>TEXT 1</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium veniam consequuntur libero? Explicabo consectetur rerum odit? Qui ea dolore culpa. Provident, exercitationem reiciendis voluptatum nulla quo nihil iste? Non doloremque officia ex dicta, ea molestias corporis. Quisquam, tenetur! Consequatur totam quaerat ullam incidunt quas nostrum expedita, quidem iste tempora est blanditiis corrupti sunt id! Esse necessitatibus non harum, ad quisquam unde, eius placeat est explicabo ex repudiandae suscipit, ipsum tempora a quibusdam facere porro officia magnam dolorum fuga iste. Quam, consequatur provident reiciendis quis doloribus at hic itaque soluta maiores libero voluptas assumenda, ut alias mollitia corrupti nulla fuga autem sapiente recusandae, aspernatur ad sed quasi earum. Nostrum, alias veritatis est qui quae ratione. Dignissimos et eum modi, beatae odio porro totam, minus debitis eius expedita mollitia ea est veritatis, ut possimus delectus! Nesciunt, ad quos quasi soluta error cum veritatis aliquam, temporibus optio, commodi fuga perferendis aperiam dignissimos debitis?</p>
</div>
</div>
</div>
</body>
Use z-index to control the stacking context. You can also use planes image as background on .text div.
CSS for z-index below:
.title-wrapper {
width: 100%;
position: fixed;
z-index: 1;
}
.text {
text-align: center;
position: relative;
z-index: 10;
}
When trying to restrict an image to a max-width of 100%, the max-width property fails to work in IE10 when inside a table cell with a set width and a table-layout: fixed.
How can I force this while maintaining the table-cell display properties?
CodePen
.row {
max-width: 700px;
margin: 0 auto;
display: table;
table-layout: fixed;
}
.photo,
.text {
display: table-cell;
vertical-align: middle;
}
.photo {
width: 25%;
img {
max-width: 100%;
height: auto;
}
}
.text {
width: 75%;
}
HTML <div class="row"> <div class="photo"><img src="http://lorempixel.com/1000/600/sports/1/" alt="" /></div> <div class="text"> Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Optio facilis debitis sequi hic iusto nostrum fugiat. Temporibus rem repellendus,
officia,
asperiores perspiciatis delectus labore odio iste voluptatum consectetur quibusdam magnam deserunt,
ea ipsa eos quidem. Aperiam iste voluptate expedita illum,
suscipit animi quas eum sed omnis reiciendis optio molestiae maiores sunt voluptates,
ad. Pariatur rem similique,
cupiditate impedit a iure odio laboriosam quaerat in magni vel at incidunt ratione corrupti quod repellat quo,
vitae veritatis et magnam doloribus mollitia tenetur? </div> </div> .row {
max-width: 700px;
margin: 0 auto;
display: table;
table-layout: fixed;
}
.photo,
.text {
display: table-cell;
vertical-align: middle;
}
.photo {
width: 25%;
img {
max-width: 100%;
height: auto;
}
}
.text {
width: 75%;
}
<div class="row">
<div class="photo">
<img src="http://lorempixel.com/1000/600/sports/1/" alt="" />
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio facilis debitis sequi hic iusto nostrum fugiat. Temporibus rem repellendus, officia, asperiores perspiciatis delectus labore odio iste voluptatum consectetur quibusdam magnam deserunt, ea
ipsa eos quidem. Aperiam iste voluptate expedita illum, suscipit animi quas eum sed omnis reiciendis optio molestiae maiores sunt voluptates, ad. Pariatur rem similique, cupiditate impedit a iure odio laboriosam quaerat in magni vel at incidunt ratione
corrupti quod repellat quo, vitae veritatis et magnam doloribus mollitia tenetur?
</div>
</div>
Problem
This happens because you have your table also with max-width and
because img is an inline element.
Explanation
min/max-width won't apply to non replaced inline elements.
W3C specs says:
10.4 Minimum and maximum widths: min-width and max-width
max-width
Applies to: all elements but non-replaced inline elements, table
rows, and row groups
Possible solutions:
you can just set it width:100% in img
or
set width:700px in table
.row {
max-width: 700px;
margin: 0 auto;
display: table;
table-layout: fixed;
}
.photo,
.text {
display: table-cell;
vertical-align: middle;
}
.photo {
width: 25%;
}
.photo img {
width: 100%;
height: auto;
}
.text {
width: 75%;
}
<div class="row">
<div class="photo">
<img src="http://lorempixel.com/1000/600/sports/1/" alt="" />
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio facilis debitis sequi hic iusto nostrum fugiat. Temporibus rem repellendus, officia, asperiores perspiciatis delectus labore odio iste voluptatum consectetur quibusdam magnam deserunt, ea
ipsa eos quidem. Aperiam iste voluptate expedita illum, suscipit animi quas eum sed omnis reiciendis optio molestiae maiores sunt voluptates, ad. Pariatur rem similique, cupiditate impedit a iure odio laboriosam quaerat in magni vel at incidunt ratione
corrupti quod repellat quo, vitae veritatis et magnam doloribus mollitia tenetur?
</div>
</div>
Note
Also occurs in IE11.
In your CSS, instead of:
.photo{
width: 25%;
img{
max-width: 100%;
height: auto;
}
}
try:
.photo{
width: 25%;
}
.photo img{
max-width:170px; /* Or another size*/
width:100%;
height: auto;
}
Besides separating the two elements, this says "Make my image 100%, unless it's bigger than 170px. Tested in IE as well.
I have a PSD which I have to convert to html. I have a problem with some elements, to be more precise I have no idea how to create it, furthermore I don't know how to name it to find examples in google. Looking for your advices. Those arrows should be responsive(become longer or shorter)
I would give the background the dashed lines. Then I would position the icons along with their arrow heads at the top, bottom, and middle using css. Then as the element grows and shrinks the icons move with the sizing and cover the dashed lines in the background.
Here, I got you started...
.container {
box-sizing: border-box;
width: 80%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.top-dash {
position: relative;
width: 100%;
height: 30px;
margin-bottom: 1em;
background-color: black;
display: flex;
align-items: center;
justify-content: space-between;
}
.top-dash:before {
content: "";
position: absolute;
left: 0;
top: 13px;
width: 100%;
border-top: 5px dashed orange;
}
[class*="word"] {
display: block;
padding-right: 1em;
background-color: black;
color: orange;
font-size: 18px;
font-weight: bold;
z-index: 5;
}
[class*="word"]:first-child {
padding-left: 1em;
}
[class*="word"]:nth-child(n+2):before {
content: ">";
padding-right: 1em;
}
.content {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0 2em;
border-left: 60px solid blue;
}
.side-dash {
position: absolute;
left: -60px;
top: 0;
width: 60px;
height: 100%;
overflow: hidden;
display: flex;
}
.side-dash:before {
content: "";
position: absolute;
left: 28px;
top: 0;
height: 100%;
border-left: 5px dashed white;
}
<div class="container">
<div class="top-dash">
<span class="word-left">ONE</span>
<span class="word-mid">TWO</span>
<span class="word-right">THREE</span>
</div>
<div class="content">
<div class="side-dash">
<span class="icon-top"></span>
<span class="icon-mid"></span>
<span class="icon-bot"></span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, cupiditate, explicabo! Voluptatibus placeat quod magnam soluta, fuga molestiae consectetur doloribus distinctio ipsum voluptas labore delectus reprehenderit rem voluptate, beatae nesciunt.</p>
<p>Nisi excepturi nobis ipsam perferendis nemo ipsa! Aspernatur quaerat ad, harum sapiente? Adipisci, ea. Aperiam exercitationem unde reiciendis obcaecati dolorem sit vitae animi, ut at quisquam corporis ratione voluptatum modi!</p>
<p>Assumenda explicabo voluptatum ea porro unde quo at praesentium temporibus quae optio, laudantium ab minus vero quas, repellat nihil. Laudantium, facere. Tempora adipisci earum voluptatem deserunt atque eos fugiat debitis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, cupiditate, explicabo! Voluptatibus placeat quod magnam soluta, fuga molestiae consectetur doloribus distinctio ipsum voluptas labore delectus reprehenderit rem voluptate, beatae nesciunt.</p>
<p>Nisi excepturi nobis ipsam perferendis nemo ipsa! Aspernatur quaerat ad, harum sapiente? Adipisci, ea. Aperiam exercitationem unde reiciendis obcaecati dolorem sit vitae animi, ut at quisquam corporis ratione voluptatum modi!</p>
<p>Assumenda explicabo voluptatum ea porro unde quo at praesentium temporibus quae optio, laudantium ab minus vero quas, repellat nihil. Laudantium, facere. Tempora adipisci earum voluptatem deserunt atque eos fugiat debitis.</p>
</div>
</div>