I have 2 contents, the first one is blue section and the second one is purple section.
I add position absolute in the second section since I want to make the content share background, half with blue section and purple section.
My question, if I add more text on the first section, the text for the first section is hidden behind the second section.
Is there a way to make the first section flexible?
So whenever I add more text, the second section will not hide the text.
.commercial-wrapper {
display: flex;
position: relative;
bottom: 320px;
}
.commercial-white {
background-color: #f1f1f4;
width: 340px;
height: 460px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-bottom: 15px solid #005da0;
margin: 10px;
}
.commercial-blue {
position: absolute;
background-color: #005da0;
color: #ffffff;
width: 340px;
height: 473px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 10px;
border: 2px solid #ffffff;
visibility: hidden;
}
.open.commercial-blue {
visibility: visible;
}
.commercial-flip {
padding: 20px;
pointer-events: none;
}
.main-wrapper {
display: flex;
flex-direction: column;
background-color: purple;
justify-content: center;
}
.commercial-wrapper-text {
text-align: center;
background-color: #215cad;
color: #ffffff;
padding: 20px 0;
height: 500px;
}
.commercial-main-wrapper-flip {
background-color: purple;
position: relative;
height: 200px;
}
.commercial-wrapper-flip {
display: flex;
justify-content: center;
position: relative;
flex-wrap: wrap;
}
#industry-block {
background-color: #dce5ee;
}
.commit-industry {
border: 1px solid purple;
text-align: center;
position: relative;
}
<div class="commercial-solution-wrapper">
<div class="commercial-wrapper-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="commercial-main-wrapper-flip">
<div class="commercial-wrapper-flip">
<div class="commercial-wrapper">
<div class="commercial-white">
<div class="commercial-flip">
<h3>Lorem ipsum</h3>
</div>
</div>
</div>
<div class="commercial-wrapper">
<div class="commercial-white">
<div class="commercial-flip">
<h3>Lorem ipsum</h3>
</div>
</div>
</div>
<div class="commercial-wrapper">
<div class="commercial-white">
<div class="commercial-flip">
<h3>Lorem ipsum</h3>
</div>
</div>
</div>
<div class="commercial-wrapper">
<div class="commercial-white">
<div class="commercial-flip">
<h3>Lorem ipsum</h3>
</div>
</div>
</div>
</div>
</div>
EDIT: add an image for expected result
Because you are adding position: absolute you are taking that element out of document flow - so the text won't ever interact with the content below (hence the hiding).
One way to do it is to add a linear gradient to the second wrapper. So you are essentially "faking" the overlap.
The important part:
.commercial-main-wrapper-flip {
background: linear-gradient(0deg, rgba(191, 0, 254, 1) 55%, rgba(33, 92, 173, 1) 55%);
position: relative;
}
.commercial-wrapper {
display: flex;
position: relative;
}
.commercial-white {
background-color: #f1f1f4;
width: 340px;
height: 460px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-bottom: 15px solid #005da0;
margin: 10px;
}
.commercial-blue {
position: relative;
background-color: #005da0;
color: #ffffff;
width: 340px;
height: 473px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 10px;
border: 2px solid #ffffff;
visibility: hidden;
}
.open.commercial-blue {
visibility: visible;
}
.commercial-flip {
padding: 20px;
pointer-events: none;
}
.main-wrapper {
display: flex;
flex-direction: column;
background-color: purple;
justify-content: center;
}
.commercial-wrapper-text {
text-align: center;
background-color: #215cad;
color: #ffffff;
padding: 20px 0;
}
.commercial-main-wrapper-flip {
background: linear-gradient(0deg, rgba(191, 0, 254, 1) 55%, rgba(33, 92, 173, 1) 55%);
position: relative;
}
.commercial-wrapper-flip {
display: flex;
justify-content: center;
position: relative;
flex-wrap: wrap;
}
<div class="commercial-solution-wrapper">
<div class="commercial-wrapper-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="commercial-main-wrapper-flip">
<div class="commercial-wrapper-flip">
<div class="commercial-wrapper">
<div class="commercial-white">
<div class="commercial-flip">
<h3>Lorem ipsum</h3>
</div>
</div>
</div>
<div class="commercial-wrapper">
<div class="commercial-white">
<div class="commercial-flip">
<h3>Lorem ipsum</h3>
</div>
</div>
</div>
<div class="commercial-wrapper">
<div class="commercial-white">
<div class="commercial-flip">
<h3>Lorem ipsum</h3>
</div>
</div>
</div>
<div class="commercial-wrapper">
<div class="commercial-white">
<div class="commercial-flip">
<h3>Lorem ipsum</h3>
</div>
</div>
</div>
</div>
</div>
Related
I want these below contents to have 50% width equally on PC's and 100% in mobile devices.
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.box-left {
width: 100%
}
.box-right {
width: 100%
}
</style>
<div class="container">
<div class="box-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</div>
<img class="box-right" src="https://i.imgur.com/gawfygm.png" />
</div>
Expand or Shrink the view to check if its working.
.container {
display: flex;
flex-direction: column;
}
.box-left {
width: 100%;
font-size: 1rem;
font-family: 'Work Sans', sans-serif;
line-height: 1.5;
padding: 1rem;
}
.box-right {
margin: 0 auto;
width: 100%;
height: auto;
}
#media(min-width:576px) {
.container {
flex-direction: row;
}
.box-left {
width: 50%;
background: lightblue;
}
.box-right {
width: 50%;
background: lightcoral;
}
}
<div class="container">
<div class="box-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<img class="box-right" src="https://i.imgur.com/gawfygm.png" />
</div>
I'm creating a "Why Choose Us" splash page and I want to create tables with an image on one side and a reason on the other. I need the image to vertically align in the center.
So far I've tried making another table inside the table, and vertically aligning the image with 'vertical-align: middle' via a table cell wrapped around it.
<section class="reason">
<div class="content">
<div class="float-left table">
<div class="table-cell">
<img class="thumbnail" src="https://1eican1u2cuw7g1kw7btt2xy-wpengine.netdna-ssl.com/wp-content/uploads/personal-attention-vamospanish-85x85.png">
</div>
</div>
<div class="float-right">
<h3>
Lorem Ipsum Dolor Sit Amet
</h3>
<p class="appeal">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</section>
<style>
.reason {
padding: 100px;
background-color: #fff;
}
.content {
display: table;
clear: both;
max-width: 935px;
margin: 0 auto;
}
.float-left {
float: left;
width: 50%;
}
.float-right {
float: right;
width: 50%;
}
.table {
display: table;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
.thumbnail {
display: block;
margin: 0 auto;
}
</style>
Here's a codepen outlining the problem: https://codepen.io/AlecAcres/pen/NVMRoY
May be a style to <td>?
<style>
td img {
vertical-align: top;
}
</style>
I have changed the code (basically used flex instead of table) -:
Working demo here
HTML
<section class="reason">
<div class="content">
<div class="float-left">
<div class="table-cell">
<img class="thumbnail" src="https://1eican1u2cuw7g1kw7btt2xy-wpengine.netdna-ssl.com/wp-content/uploads/personal-attention-vamospanish-85x85.png">
</div>
</div>
<div class="float-right">
<h3>
Lorem Ipsum Dolor Sit Amet
</h3>
<p class="appeal">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</section>
CSS
.reason {
padding: 100px;
background-color: #fff;
}
.content {
display: flex;
justify-content: center;
max-width: 935px;
margin: 0 auto;
}
.float-left {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.float-right {
flex: 1
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
.thumbnail {
display: block;
margin: 0 auto;
}
.flex-container {
display: flex;
}
.flex-image {
display: flex;
flex-flow: column wrap;
justify-content: space-evenly;
}
<div class="flex-container">
<div class="flex-image">
<img
src="https://1eican1u2cuw7g1kw7btt2xy-wpengine.netdna-ssl.com/wp-content/uploads/personal-attention-vamospanish-85x85.png">
</div>
<div class="flex-content">
<h3>
Lorem Ipsum Dolor Sit Amet
</h3>
<p class="appeal">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
Here is a more modern approach using FlexBox!
Demo:
https://codepen.io/anon/pen/WBJoxY
HTML:
<section class="reason">
<div class="content">
<div class="thumbnail">
<img src="https://1eican1u2cuw7g1kw7btt2xy-wpengine.netdna-ssl.com/wp-content/uploads/personal-attention-vamospanish-85x85.png">
</div>
<div class="text">
<h3>
Lorem Ipsum Dolor Sit Amet
</h3>
<p class="appeal">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</section>
CSS:
.reason {
padding: 100px;
background-color: #fff;
}
.content {
display: flex;
flex-direction: row;
max-width: 935px;
margin: 0 auto;
}
.text {
max-width: 50%;
}
.thumbnail {
display: flex;
margin: 0 auto;
justify-content: center;
align-items: center;
}
I'm new in CSS. I want to move the box div below when the browser is getting smaller or all box position go back column position when the browser is in desktop size. I have added flex-wrap and flex-direction in my source code but nothing happens. I don't know what mistake that I make. Hope you guys can help me solve this problem.Thank you in advance.
* {
padding: 0;
margin: 0;
}
.container-top {
background-color: green;
color: white;
}
.container-top-context {
display: flex;
flex-direction: column;
align-items: center;
height: auto;
}
.container-top-context h1 {
font-size: 70px;
word-spacing: 0.3em;
}
.container-top-context h2 {
font-size: 20px;
word-spacing: 0.2em;
}
.logo {
background-color: yellow;
height: 100px;
width: 100px;
margin-bottom: 10px;
}
.container-testimony-context {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.box-1 {
flex: 1;
background-color: #EF5350;
color: #FFCDD2 padding:5px;
text-align: center;
}
.box-2 {
flex: 1;
background-color: #AB47BC;
color: #E1BEE7;
padding: 5px;
text-align: center;
}
.box-3 {
flex: 1;
background-color: #29B6F6;
color: #B3E5FC;
padding: 5px;
text-align: center;
}
.box-4 {
flex: 1;
background-color: #66BB6A;
color: #C8E6C9;
padding: 5px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>my flex box</title>
</head>
<body>
<div class="container-top">
<div class="container-top-context">
<h1>Road of Kalibaenan</h1>
<h2>Gives exact direction to unusual creatures</h2>
<div class="logo"></div>
</div>
</div>
<div class="container-testimony-context">
<div class="box-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="box-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="box-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="box-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</body>
</html>
It is flexing as intended, just one at a time and at a very small screen size.
To control this better and make the flex-direction switch at once try using a media query like the updated exampled below:
* {
padding: 0;
margin: 0;
}
.container-top {
background-color: green;
color: white;
}
.container-top-context {
display: flex;
flex-direction: column;
align-items: center;
height: auto;
}
.container-top-context h1 {
font-size: 70px;
word-spacing: 0.3em;
}
.container-top-context h2 {
font-size: 20px;
word-spacing: 0.2em;
}
.logo {
background-color: yellow;
height: 100px;
width: 100px;
margin-bottom: 10px;
}
.container-testimony-context {
display: flex;
flex-wrap: wrap;
}
.box-1 {
flex: 1;
background-color: #EF5350;
color: #FFCDD2 padding:5px;
text-align: center;
}
.box-2 {
flex: 1;
background-color: #AB47BC;
color: #E1BEE7;
padding: 5px;
text-align: center;
}
.box-3 {
flex: 1;
background-color: #29B6F6;
color: #B3E5FC;
padding: 5px;
text-align: center;
}
.box-4 {
flex: 1;
background-color: #66BB6A;
color: #C8E6C9;
padding: 5px;
text-align: center;
}
#media screen and (max-width: 600px) {
.container-testimony-context {
flex-direction: column;
}
}
<!DOCTYPE html>
<html>
<head>
<title>my flex box</title>
</head>
<body>
<div class="container-top">
<div class="container-top-context">
<h1>Road of Kalibaenan</h1>
<h2>Gives exact direction to unusual creatures</h2>
<div class="logo"></div>
</div>
</div>
<div class="container-testimony-context">
<div class="box-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="box-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="box-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="box-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</body>
</html>
I am creating a layout but I am getting some issue with the position.
I tried position: absolute but I am getting some issue.
I user display: flex and flex:1 for display the equal height of the div.
Would you help me out in this?
I tried below code to set.
.set_white_box{
position: absolute;
width: 50%;
top: 50%;
transform: translateY(-50%);
}
I added a simple structure in the snippet.
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.equal_padding {
padding: 100px 0;
}
.service_content1 {
display: flex;
}
.service_img_col {
width: 50%;
flex: 1;
}
.service_img_col img {
width: 100%;
}
.service_box {
flex: 1;
background-color: #fff;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.18);
box-sizing: border-box;
padding: 40px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section>
<div class="container">
<div class="row">
<div class="equal_padding clearfix service_content1">
<div class="service_box set_white_box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="service_img_col"><img src="https://images.pexels.com/photos/1097768/pexels-photo-1097768.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
</div>
<div class="equal_padding clearfix service_content1">
<div class="service_img_col"><img src="https://images.pexels.com/photos/1097768/pexels-photo-1097768.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
<div class="service_box set_white_box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</section>
you can use transform to move the image around and z-index to change order
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.equal_padding {
padding: 100px 0;
}
.service_content1 {
display: flex;
}
.service_img_col {
width: 50%;
flex: 1;
/* translate to move it around */
transform: translate(-50px, 50px);
}
.service_img_col img {
width: 100%;
}
.service_box {
flex: 1;
background-color: #fff;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.18);
box-sizing: border-box;
padding: 40px;
/* z-index to bring text to front */
position:relative;
z-index: 2;
}
/* jsut using nth-child to target the 2nd version */
.equal_padding:nth-child(even) .service_img_col {
transform: translate(50px, -50px);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section>
<div class="container">
<div class="row">
<div class="equal_padding clearfix service_content1">
<div class="service_box set_white_box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="service_img_col"><img src="https://images.pexels.com/photos/1097768/pexels-photo-1097768.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
</div>
<div class="equal_padding clearfix service_content1">
<div class="service_img_col"><img src="https://images.pexels.com/photos/1097768/pexels-photo-1097768.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
<div class="service_box set_white_box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</section>
Please try following code. also you can add multiple box no change design and looking good with left & right side align
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.equal_padding {
padding: 100px 0;
}
.equal_padding:nth-child(2n + 1) .service_img_col {
position: relative;
left: -50px;
top: 30px;
}
.equal_padding:nth-child(2n + 2) .service_img_col {
position: relative;
right: -50px;
top: -30px;
}
.equal_padding:nth-child(2n + 1) {
padding-left: 50px;
}
.equal_padding:nth-child(2n + 2) {
padding-right: 50px;
}
.service_content1 {
display: flex;
}
.service_img_col {
width: 50%;
flex: 1;
border: 4px solid #000;
}
.service_img_col img {
width: 100%;
}
.service_box {
flex: 1;
background-color: #fff;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.18);
box-sizing: border-box;
padding: 40px;
position: relative;
z-index: 9;
border: 4px solid #000;
}
<section>
<div class="container">
<div class="row">
<div class="equal_padding clearfix service_content1">
<div class="service_box set_white_box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="service_img_col"><img src="https://images.pexels.com/photos/1097768/pexels-photo-1097768.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
</div>
<div class="equal_padding clearfix service_content1">
<div class="service_img_col"><img src="https://images.pexels.com/photos/1097768/pexels-photo-1097768.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
<div class="service_box set_white_box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</section>
I've been trying to solve a number of issues for this questionnaire I'm making. I've reformatted this question because my old one was pretty confusing and I'm taking a new angle on the issue.
With the new code I've summited the problem is that the child div .question-container inside the .questionnaire-box is spilling out all the text past the set height. I prefer .question-container to have the same height as .questionnaire-box and scroll on overflow.
.questionnaire-container {
position: fixed;
width: 100%;
height: 100%;
padding: 2rem 0;
background-color: rgba(100, 100, 100, .1);
}
.questionnaire-box {
position: relative;
width: 80%;
max-height: 80%;
margin: 0 auto;
background-color: #ffffff;
}
.question-container {
max-height: 80%;
overflow-y: scroll;
}
.questionnaire-nav {
position: absolute;
bottom: 0;
width: 100%;
height: 55px;
border-top: 1px rgba(100, 100, 100, .3) solid;
background-color: #ffffff;
text-align: center;
}
button {
margin 1rem;
}
<html>
<body>
<div class="questionnaire-container">
<div class="questionnaire-box">
<div class="question-container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="questionnaire-nav">
<button>Submit</button>
</div>
</div>
</div>
</body>
</html>
This is what it looks like inside my app.
And this is what I'm trying to achieve.
The question is a little overly-complex, but I assume the problem here is that you're unable to scroll down and view all of the content in .question-container.
Does this work?
https://jsfiddle.net/tobyl/bemkkz72/
If so, the critical CSS is the additional padding-bottom in this block:
.questionnaire-box {
position: relative;
width: 80%;
max-height: 80%;
margin: 0 auto;
padding: 1.5rem 2rem 6rem 2rem;
border-radius: 20px;
background-color: #ffffff;
overflow: auto;
}
There were quite a few things I changed in your code for the snippet below - it will be too much to explain everything. Still, some of the most important changes:
No flexbox
Fixed element (nav) outside of the DIV above it
Look at the code. I can explain more, if this is what you are after, but not tonight (i.e. "good night" :-)...
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
.questionnaire-container {
width: 100%;
height: calc(100% -50px);
padding: 5rem 0;
background-color: rgba(255, 100, 100, .1);
}
.questionnaire-box {
width: 80%;
margin: 0 auto;
padding: 1.5rem 2rem;
border-radius: 20px;
background-color: #ffffff;
}
.question-container {
height: 100%;
margin-bottom: 55px;
padding: 3rem 4rem;
}
.questionnaire-nav {
position: fixed;
bottom: 0;
text-align: center;
width: 100%;
height: 30px;
border-top: 1px rgba(100, 100, 100, .3) solid;
background-color: #ffffff;
padding: 10px 0;
}
<html>
<body>
<div class="questionnaire-container">
<form class="questionnaire-box">
<div class="question-container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor</p>
<p>in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor</p>
<p>in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<nav class="questionnaire-nav">
<button>Previous</button>
</nav>
</form></body>
</html>
Try to change these three things in .questionnaire-nav:
position to fixed
width to 75%
and deleted margin-left: -20px;
Does this work for you?
html, body {
max-height: 100%;
}
.questionnaire-container {
position: fixed;
width: 100%;
height: 100%;
padding: 5rem 0;
background-color: rgba(255, 100, 100, .1);
}
.questionnaire-box {
position: relative;
width: 80%;
max-height: 80%;
margin: 0 auto;
padding: 1.5rem 2rem;
border-radius: 20px;
background-color: #ffffff;
overflow: auto;
}
.question-container {
height: 100%;
margin-bottom: 55px;
padding: 3rem 4rem;
overflow-y: auto;
}
.questionnaire-nav {
display: flex;
position: fixed;
bottom: 0;
align-items: center;
justify-content: center;
width: 75%;
height: 55px;
border-top: 1px rgba(100, 100, 100, .3) solid;
background-color: #ffffff;
}
<html>
<body>
<div class="questionnaire-container">
<form class="questionnaire-box">
<div class="question-container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<nav class="questionnaire-nav">
<button>Previous</button>
</nav>
</form>
</div>
</body>
</html>