How could I adjust floating elements in CSS?
For the code below I got result as on attached picture.
I would like to have left and right divs aligned vertically.
* {
margin: 10px;
padding: 10px;
}
body {
background: #C0FFC0;
}
.header {
background: #C0C0FF;
height: 100px;
}
.left {
background: #FFC0C0;
float: left;
height: 200px;
width: 25%;
}
.right {
background: #FFFFC0;
overflow: hidden;
height: 200px;
}
.bottom {
background: #C0FFFF;
clear: both;
height: 100px;
}
<div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
Just wrap left and right divs inside another div (main) and you are good to go.
* {
margin: 10px;
padding: 10px;
}
body {
background: #C0FFC0;
}
.header {
background: #C0C0FF;
height: 100px;
}
.main {
overflow: hidden;
margin: 0px;
padding: 0px;
}
.left {
background: #FFC0C0;
float: left;
height: 200px;
width: 25%;
}
.right {
background: #FFFFC0;
height: 200px;
overflow: hidden;
}
.bottom {
background: #C0FFFF;
clear: both;
height: 100px;
}
<div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="main">
<div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
Related
I am trying to recreate this card using CSS.
However I can't figure out how to create the HTML and CSS. When I create a div and give it a background cololour and relative position, the Image is getting pushed out.
.Card {
display: flex;
flex-direction: column;
align-items: center;
width: 250px;
height: 350px;
background-color: white;
}
.CardHeader {
width: 100%;
display: flex;
flex-direction: column;
}
.CardHeader div {
width: 150px;
height: 150px;
background-color: #ff9301;
display: inline;
position: relative;
left: -15px;
}
.CardHeader img {
width: 100px;
height: 100px;
background-color: red;
}
<div class="Card">
<div class="CardHeader">
<div></div>
<Image src="/imgs/desktop-solid.svg" width={100} height={100} alt="Image" />
</div>
<div class="CardBody">
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
</div>
Few things to learn:
Place the image inside the div element
Use position:absolute on the image to allow you to move the image layer
Use overflow:hidden; on the div to 'cut off' the the image so it doesn't appear outside the container.
You also don't need the extra div element inside the card header - just use the card header as the parent.
.Card {
display: flex;
flex-direction: column;
align-items: center;
width: 300px;
height: 350px;
background-color: lightgray;
border-radius:10px;
}
.CardHeader {
display: flex;
flex-direction: column;
width: 300px;
height: 150px;
background-color: #ff9301;
display: inline;
position: relative;
overflow: hidden;
border-radius: 10px 10px 0 0;
}
.CardHeader img {
width: 150px;
height: 150px;
background-color: red;
position: absolute;
top: -20%;
left: -10%;
border-radius: 50%;
}
<div class="Card">
<div class="CardHeader">
<Image src="/imgs/desktop-solid.svg" width={100} height={100} alt="Image" />
</div>
<div class="CardBody">
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
</div>
I am trying to create a scrollable horizontal timeline with a fixed width. I have overflow-x: auto on the parent container and whenever I add white-space: nowrap to that same element, the child list elements start getting cut off. I assume this is something to do with the behavior of flex-box. I have tried adding min-width: 0 to the flex elements and flex-grow: 1 but no luck.
body {
font-family: Arial, Helvetica, sans-serif;
}
.container {
height: 200px;
width: 500px;
margin: 0 auto;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.timeline {
display: flex;
justify-content: center;
min-width: 0;
}
.timeline ol {
list-style: none;
display: flex;
justify-content: center;
}
.timeline .horizontal-line {
position: relative;
background-color: #0d6a3d;
height: 3px;
border-radius: 4px;
margin: 5em 0;
}
.event {
margin: 0px 10px;
position: relative;
}
.date {
position: relative;
text-align: center;
top: -70px;
width: 100%;
}
.date::after {
content: "";
position: absolute;
bottom: -28px;
left: 50%;
right: auto;
height: 20px;
width: 20px;
border-radius: 50%;
border: 3px solid #00a950;
background-color: #fff;
transition: 0.3s ease;
transform: translateX(-50%);
}
.content {
width: 100%;
text-align: center;
position: relative;
top: -45px;
}
<section class="container">
<div class="timeline">
<div class="horizontal-line">
<ol>
<li class="event">
<h3 class="date">07/02/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
</ol>
</div>
</div>
</section>
Add width: fit-content; to your timeline. That gets all elements to fit in the horizontal scroll. Then you are left with the default padding-inline-start on the ol. You can remove that gap by setting padding: 0; or padding-inline-start: 0;.
body {
font-family: Arial, Helvetica, sans-serif;
}
.container {
height: 200px;
width: 500px;
margin: 0 auto;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.timeline {
display: flex;
justify-content: center;
min-width: 0;
width: fit-content;
}
.timeline ol {
list-style: none;
display: flex;
justify-content: center;
padding: 0;
}
.timeline .horizontal-line {
position: relative;
background-color: #0d6a3d;
height: 3px;
border-radius: 4px;
margin: 5em 0;
}
.event {
margin: 0px 10px;
position: relative;
}
.date {
position: relative;
text-align: center;
top: -70px;
width: 100%;
}
.date::after {
content: "";
position: absolute;
bottom: -28px;
left: 50%;
right: auto;
height: 20px;
width: 20px;
border-radius: 50%;
border: 3px solid #00a950;
background-color: #fff;
transition: 0.3s ease;
transform: translateX(-50%);
}
.content {
width: 100%;
text-align: center;
position: relative;
top: -45px;
}
<section class="container">
<div class="timeline">
<div class="horizontal-line">
<ol>
<li class="event">
<h3 class="date">07/02/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
</ol>
</div>
</div>
</section>
I am creating a timeline but it's not displaying my design output. I have to display the first child after the image and next child before image with a full underline. I tried but my underline not displaying proper even image is not display the right way
Would you help me out in this?
I need a output like this.
.timeline ul li {
list-style-type: none;
position: relative;
width: 6px;
margin: 0 auto;
padding-top: 50px;
/* background: #fff;*/
border-right: 2px solid #ff0000;
}
.timeline ul li::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 30px;
height: 30px;
background: inherit;
}
.timeline ul li:nth-child(odd),
.timeline ul li:nth-child(even){
width:50%;
float:left;
clear:right;
text-align:right;
position:relative;
}
.timeline ul li:nth-child(even){
width:50%;
float:right;
clear:left;
text-align:left;
position:relative;
}
.timeline ul li:nth-child(odd):after,
.timeline ul li:nth-child(even):before{
background: url('https://image.flaticon.com/icons/png/512/67/67347.png') no-repeat;
width: 24px;
height: 20px;
background-size: 100% 100%;
}
<div class="timeline">
<ul>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
</ul>
</div>
This is not perfect or dynamic but it will get you on the right path.
use nth-child(odd/even) to select every second row
li:nth-child(odd) {
float: left;
border-right: thick solid #ff0000;
margin: 0px;
padding-right: 20px;
background-image: url('https://image.flaticon.com/icons/png/512/67/67347.png');
background-repeat: no-repeat;
background-size: 20px 20px;
background-position-x: 254px;
background-position-y: 18px;
}
li:nth-child(even) {
float: right;
border-left: thick solid #ff0000;
margin-right: 186px;
padding-left: 20px;
background-image: url('https://image.flaticon.com/icons/png/512/67/67347.png');
background-repeat: no-repeat;
background-size: 20px 20px;
background-position-y: 18px;
}
ul{
list-style: none;
}
li{
padding: 20px 0 0 0;
}
div{
width: 777px;
}
img{
width: 20px;
}
<div class="timeline">
<ul>
<li>
Lorem ipsum dolor sit amet, consectetu
</li>
<li>
Lorem ipsum dolor sit amet, consectetu
</li>
<li>
Lorem ipsum dolor sit amet, consectetu
</li>
<li>
Lorem ipsum dolor sit amet, consectetu
</li>
<li>
Lorem ipsum dolor sit amet, consectetu
</li>
</ul>
</div>
here is my solution :
jsFiddle
.timeline ul li {
list-style-type: none;
position: relative;
width: 6px;
margin: 0 auto;
padding-top: 50px;
/* background: #fff;*/
}
.timeline ul li:nth-child(odd) {
border-right: 2px solid #ff0000;
}
.timeline ul li:nth-child(even) {
border-left: 2px solid #ff0000;
}
.timeline ul li::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 30px;
height: 30px;
background: inherit;
}
.timeline ul li:nth-child(odd){
width:50%;
float:left;
clear:right;
text-align:right;
position:relative;
}
.timeline ul li:nth-child(even){
width:49.7%;
float:right;
clear:left;
text-align:left;
position:relative;
}
.timeline ul li:nth-child(odd):after,
.timeline ul li:nth-child(odd):before{
background: url('https://image.flaticon.com/icons/png/512/67/67347.png') no-repeat;
width: 24px;
height: 20px;
background-size: 100% 100%;
}
<div class="timeline">
<ul>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
</ul>
</div>
You can change a part of CSS as below: Jsfiddle
.timeline ul li:nth-child(1), .timeline ul li:nth-child(2n+1){
width: 50%;
float: left;
clear: right;
text-align: right;
position: relative;
border-right: 5px inset black; //border
left: -5px; //alignment
}
.timeline ul li:nth-child(2n){
width: 50%;
float: right;
clear: left;
text-align: left;
position: relative;
border-left: 5px inset black; //border
}
There are a couple of thing missing or wrong with your code.
You applied the border on both the divs on the same side. I fixed this by giving them both a different border.
To make sure the border was included within the size of the element I used box-sizing: border-box;.
As with some of the other answers they became jagged so I applied a width to the element of 50% - half the border size i.e. width: calc(50% - 1px). This should always result in a straight line.
You never made sure the actual :before would be displayed. So i applied the same rules for the :after to the :before.
Gave the li a small padding so it wouldn't be stuck to the border, resulting in some space for the image.
The code below should work the way you intended. As for margins and padding, you are ofcourse free to adjust them to your needs.
.timeline ul li {
list-style-type: none;
position: relative;
width: calc(50% + 1px);
margin: 0 auto;
padding-top: 50px;
box-sizing: border-box;
}
.timeline ul li::after, .timeline ul li::before {
position: absolute;
transform: translateX(-50%);
width: 24px;
height: 20px;
content: '';
}
.timeline ul li:nth-child(odd){
float:left;
clear:right;
text-align:right;
border-right: 2px solid #ff0000;
padding-right: 2em;
}
.timeline ul li:nth-child(even){
float:right;
clear:left;
text-align:left;
border-left: 2px solid #ff0000;
padding-left: 2em;
}
.timeline ul li:nth-child(odd):after{
background: url('https://image.flaticon.com/icons/png/512/67/67347.png') no-repeat;
background-size: 100% 100%;
right: -5px;
}
.timeline ul li:nth-child(even):before{
background: url('https://image.flaticon.com/icons/png/512/67/67347.png') no-repeat;
background-size: 100% 100%;
left: 20px;
}
<div class="timeline">
<ul>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
</ul>
</div>
I needed to create a list with a custom list-index which is vertically centered to the content of the list items.
As I am using flex already I thought the easiest might be to give the list-item a display:flex; and style it. This works, but as soon, as the list-item contains other elements it is messed up. As you can see in the example below.
Whats the best way to vertically center the list-index?
-- Updated Example --
ol {
list-style: none;
padding: 0;
width: 200px;
}
ol > li {
display: flex;
margin-top: 20px;
align-items: center;
}
ol > li:before {
color: red;
content: attr(data-count)' ›';
flex display: block;
flex-shrink: 0;
text-align: right;
min-width: 24px;
padding-right: 5px;
}
<ol>
<li data-count="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li data-count="10">Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</li>
<li data-count="999">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ol>
I think that the best option is to wrap all elements inside li in one other element and that should fix the problem.
ul {
list-style: none;
padding: 0;
width: 200px;
}
ul > li {
display: flex;
margin-top: 20px;
align-items: center;
}
ul > li:before {
color: red;
content: '›';
flex display: block;
flex-shrink: 0;
text-align: center;
width: 30px;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li>
<p>Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</p>
</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ul>
Solution could be to use display:table, instead of flex, in this particular case.
ol {
list-style: none;
padding: 0;
width: 200px;
display:table;
border-spacing:0 20px;
}
ol > li {
display:table-row;
vertical-align:middle;
}
ol > li:before {
color: red;
content: attr(data-count)' ›';
display:table-cell;
vertical-align:middle;
text-align: right;
white-space: nowrap;
padding-right: 10px;
}
<ol>
<li data-count="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li data-count="10">Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</li>
<li data-count="999 99">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ol>
Here's a method with absolute positioning to keep the arrows vertically centered.
ol {
list-style: none;
padding: 0;
width: 200px;
}
ol > li {
margin: 20px 0 0;
padding-left: 36px;
position: relative;
}
ol > li:before {
color: red;
content: attr(data-count)' ›';
font-size: 14px;
line-height: 1;
position: absolute;
left: 0;
top: 50%; /* vertically center */
margin-top: -7px; /* and shift up based on 16px height */
}
<ol>
<li data-count="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li data-count="10">Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</li>
<li data-count="999">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ol>
Currently, I am using units: "vw" to make my textbox responsive.
First fiddle (Non-responsive): https://jsfiddle.net/jzhang172/w7yhd6xx/2/
#second{
height:635px;
background:gray;
}
#second-try{
height:635px;
}
.about-us-info {
margin: 0 auto;
width: 900px;
height: 313px;
border: 2px solid #3c3c3c;
position: absolute;
left: 50%;
margin-left: -450px;
top: 50%;
margin-top: -160px;
}
span.span-header {
text-align: center;
display: block;
/* margin-top: -22px; */
position: relative;
font-size: 34px;
background: white;
width: 420px;
margin: 0 auto;
margin-top: -21px;
/* border: 1px solid black; */
text-transform: uppercase;
font-family: latobold;
letter-spacing: .16em;
}
.about-us-info p {
text-align: center;
/* line-height: 28px; */
line-height: 1.65em;
}
.about-us-info p.first {
margin-top:50px;
}
<div class="section" id="second">
<div class="about-us-info">
<span class="span-header">About Us</span>
<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis. <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur. <br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</div>
Second fiddle (Attempt at responsiveness using "vw"):https://jsfiddle.net/jzhang172/9Lagw1y6/1/
.section{
position:relative;
}
#second{
min-height:635px;
}
.about-us-info {
margin: 0 auto;
width: 46.9vw;
/* height: 16.3vw; */
border: 2px solid #3c3c3c;
position: absolute;
left: 50%;
margin-left: -23.4vw;
top: 50%;
margin-top: -160px;
}span.span-header {
text-align: center;
display: block;
/* margin-top: -22px; */
position: relative;
font-size: 34px;
background: white;
width: 420px;
width: 21.875vw;
margin: 0 auto;
margin-top: -21px;
/* border: 1px solid black; */
text-transform: uppercase;
font-family: latobold;
letter-spacing: .16em;
}
.about-us-info p {
text-align: center;
/* line-height: 28px; */
line-height: 1.65em;
}
.about-us-info p.first {
margin-top:50px;
}
/*----Third section--------*/
#third{
min-height:488px;
background:gray;
}
#services-info{
margin-top:-125px;
border:2px solid white;
border-top:0px;
}
#services-header{
background:transparent;
color:white;
}
#services-paragraph{
color:white;
}
#services-header:before, #services-header:after {
content: "";
position: absolute;
height: 5px;
border-top: 2px solid white;
top: 19px;
width: 11.8vw;
}
#services-header:before {
right: 100%;
margin-right: .85vw;
}
#services-header:after {
left: 100%;
margin-left: .85vw;
}
<div class="section" id="second">
<div class="about-us-info">
<span class="span-header">About Us</span>
<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis. <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur. <br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</div>
<div class="section" id="third">
<div class="about-us-info" id="services-info">
<span class="span-header" id="services-header">Services</span>
<p class="first" id="services-paragraph">
Lorem ipsum dolor sit amet, consectetur<br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur<br>
Lorem ipsum dolor sit amet, consectetur<br>
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</div>
Here are some errors that I'd like to be corrected but not sure how to:
1.) Is VW being used properly here? Is there a better solution?
2.) I'd like the height of each section to expand based on the content within while maintaining a min-height of each section (635px for the first and 488 for the second) because right now when re-sizing the browser smaller, the content overlaps anything underneath it.
Is there any problem using this solution? Is there a better solution?
Is this it? If not, let me know.
body {margin: 0;}
.sections {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.sections section {
-webkit-box-flex: 1;
-webkit-flex: 1 0 50%;
-ms-flex: 1 0 50%;
flex: 1 0 50%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.sections section>div {
-webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
padding: 35px 50px;
border:1px solid #333;
margin: 50px 0;
max-width: 50%;
box-sizing: border-box;
position: relative;
min-width: 50%;
-webkit-transition: min-width .3s ease-out;
transition: min-width .3s ease-out;
}
#second {
background-color: white;
color: #333;
}
#third >div {
border-color: white;
}
#third {
background-color: gray;
color: white;
}
.span-header {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
background-color: white;
padding: 0 1rem;
font-size: 1.8em;
text-transform: uppercase;
text-align: center;
-webkit-transition: font-size .3s ease-out;
transition: font-size .3s ease-out;
white-space: nowrap;
}
#third .span-header {
background-color: gray;
}
#media (max-width: 767px) {
.sections section>div{
min-width: 60%;
}
.sections section>div {
padding: 15px 30px;
}
.span-header {
font-size: 1.25em;
}
}
#media (max-width: 359px) {
.sections section>div{
min-width: calc(100vw - 120px);
}
.span-header {
white-space: initial;
}
}
<div class="sections">
<section id="second">
<div class="about-us-info">
<span class="span-header">About Us</span>
<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br> Lorem ipsum dolor sit amet, consectetur.
<br> Lorem ipsum dolor sit amet, consectetur.
<br> Lorem ipsum dolor sit amet, consectetur.
<br> Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</section>
<section id="third">
<div class="about-us-info" id="services-info">
<span class="span-header" id="services-header">Services</span>
<p class="first" id="services-paragraph">
Lorem ipsum dolor sit amet, consectetur
<br> Lorem ipsum dolor sit amet, consectetur.
<br> Lorem ipsum dolor sit amet, consectetur
<br> Lorem ipsum dolor sit amet, consectetur
<br> Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</section>
</div>
Please note I've also made a few adjustments to the html markup. Cheers!
jsFiddle
Question 1
It is perfectly fine to use vw this way. Percentage widths can generally do the same things as vw, but since you have some nesting, you would have to mess with the parent's widths to make percentages work. (This use case was noted by Chris Coyier.)
The nesting I'm talking about is <div class="section">s. Since the margins on the <body element have not been reset, these sections (on some browsers) end up a little narrower than the viewport. To use percentages, you would have to do this:
/* Reset margins */
body, html {
margin: 0;
padding: 0;
}
/* Now use percentages */
.about-us-info {
width: 46.9%;
}
span.span-header {
width: 47.4%;
}
Note vw has more issues with browser support (look at the known issues tab).
Question 2
In the code given, the text boxes are using position: absolute as part of the centering. Absolute positioning takes elements out of the document flow, and that is the reason the sections are not expanding to fit the content. If you want them to expand properly, you will need to use a different centering technique.
CSS table centering (as shown in the link above) would work:
<!-- First wrap your text boxes with containers... -->
<div class="section" id="second">
<div class="container">
<div class="about-us-info">
<!-- ... -->
</div>
</div>
</div>
Then remove the current absolute-based centering on the text boxes and add the following:
/* Make the parent a table: */
.section {
display: table;
width: 100%;
}
/* Make the container a table cell and center it: */
.container {
display: table-cell;
text-align: center;
vertical-align: middle;
}