Related
for a personal project I'm using Nextjs and locomotive-scroll, I'm trying to stick an element with position:sticky; and data-scroll-sticky but it's still not work, here is the code:
import LocomotiveScroll from "https://cdn.skypack.dev/locomotive-scroll#4.1.4";
const scroll = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),
smooth: true
});
body {
padding: 0;
margin: 0;
}
.sticky {
position: sticky;
z-index: 1;
background-color: black;
color: white;
}
<div data-scroll-container>
<section id="section-1" data-scroll-section>
<div class="sticky" data-scroll data-scroll-sticky data-scroll-target="#section-1">
sticky content
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit ut orci nec malesuada. Integer condimentum auctor orci, non aliquam ex finibus blandit. Pellentesque suscipit mi egestas augue elementum consectetur. Sed suscipit, metus ut tempor
hendrerit, nulla leo auctor sapien, a mollis neque lorem vitae sapien. Curabitur eleifend, metus eu luctus malesuada, tortor est facilisis est, ut tempor libero lorem et nisl. Donec vitae gravida augue, in finibus lectus. Integer gravida elementum
mi ut ultricies. Mauris non blandit dui. Praesent quis ante et orci sollicitudin molestie feugiat ac magna. Sed vitae tincidunt urna, vitae placerat tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vivamus molestie felis nibh, in lobortis purus malesuada ac. Proin pellentesque sodales quam, at lacinia odio cursus et. Vestibulum blandit felis quis orci tincidunt, sit amet dignissim nibh porttitor. Nullam urna lorem, convallis lacinia ipsum
sit amet, efficitur interdum elit. Donec sit amet lobortis nibh. Mauris molestie augue nunc. Nam eget lacinia nisl, ut ullamcorper nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam malesuada
pellentesque risus quis dapibus. Vivamus a enim iaculis, sollicitudin nisi a, dapibus lectus. Nullam malesuada est tortor, ut aliquet mi faucibus et. Suspendisse egestas tincidunt commodo. Quisque nibh metus, egestas et commodo quis, sollicitudin
eget justo. Proin vestibulum leo est, vitae euismod nibh ornare ac. Curabitur tempus orci metus, vel sodales dui malesuada ut. Integer lobortis eros justo, sit amet feugiat odio rutrum non. Pellentesque molestie porttitor est et tempus. Etiam quis
lorem urna. Quisque quam ex, pulvinar at eleifend nec, iaculis quis nisi. In feugiat laoreet consectetur. Suspendisse molestie, nibh ullamcorper suscipit cursus, diam libero consequat ex, in sodales est augue ut ante. Curabitur dapibus iaculis magna
nec cursus. Donec convallis iaculis massa nec vulputate. Etiam elementum, urna sit amet ullamcorper pretium, enim arcu tincidunt mauris, non laoreet augue felis eu felis. Praesent hendrerit ullamcorper maximus. In pretium dui vitae odio accumsan
ultricies. In interdum quis tortor quis viverra. Duis mi sem, cursus ac est sed, commodo venenatis ante. Proin ac ipsum nisi. Donec vestibulum ultrices risus, vitae aliquet quam rutrum eu. Suspendisse a arcu nec nulla molestie porta nec non enim.
Nulla facilisis, urna in convallis feugiat, ligula magna viverra ex, quis pharetra felis erat quis est. Proin dictum accumsan quam non fringilla. Etiam bibendum, ipsum non rhoncus malesuada, quam ligula cursus nisi, eget maximus erat odio nec enim.
Nunc ut porttitor nibh. Pellentesque neque velit, feugiat quis dapibus eget, ultrices ut odio. Fusce iaculis fermentum ipsum sed porta. Nam elit orci, euismod sit amet sapien vitae, mollis gravida ligula. Nulla egestas, est id rutrum consectetur,
arcu nibh gravida augue, sit amet efficitur magna enim in urna. Vestibulum eu lacus dictum, interdum ipsum ut, placerat enim. Quisque posuere mi turpis, quis placerat turpis mattis vitae. Nulla in felis at dui auctor aliquam blandit a mi. Cras vitae
viverra dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
</section>
<section id="section-2" data-scroll-section>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla
mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>
</section>
</div>
codepen
thank u all
You need to include locomotive-scroll.css as stated in the documentation.
It should make your code work without the empty gap that appears at the beginning of the page. It will also add the CSS styling required for the locomotive-scroll to work properly.
import LocomotiveScroll from "https://cdn.skypack.dev/locomotive-scroll#4.1.4";
const scroll = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),
smooth: true
});
#import url(https://raw.githubusercontent.com/locomotivemtl/locomotive-scroll/master/dist/locomotive-scroll.css);
body {
padding: 0;
margin: 0;
}
.sticky {
position: sticky;
z-index: 1;
background-color: black;
color: white;
top: 0;
}
/*! locomotive-scroll v4.1.3 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
html.has-scroll-smooth {
overflow: hidden;
}
html.has-scroll-dragging {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.has-scroll-smooth body {
overflow: hidden;
}
.has-scroll-smooth [data-scroll-container] {
min-height: 100vh;
}
[data-scroll-direction="horizontal"] [data-scroll-container] {
height: 100vh;
display: inline-block;
white-space: nowrap;
}
[data-scroll-direction="horizontal"] [data-scroll-section] {
display: inline-block;
vertical-align: top;
white-space: nowrap;
height: 100%;
}
.c-scrollbar {
position: absolute;
right: 0;
top: 0;
width: 11px;
height: 100%;
transform-origin: center right;
transition: transform 0.3s, opacity 0.3s;
opacity: 0;
}
.c-scrollbar:hover {
transform: scaleX(1.45);
}
.c-scrollbar:hover,
.has-scroll-scrolling .c-scrollbar,
.has-scroll-dragging .c-scrollbar {
opacity: 1;
}
[data-scroll-direction="horizontal"] .c-scrollbar {
width: 100%;
height: 10px;
top: auto;
bottom: 0;
transform: scaleY(1);
}
[data-scroll-direction="horizontal"] .c-scrollbar:hover {
transform: scaleY(1.3);
}
.c-scrollbar_thumb {
position: absolute;
top: 0;
right: 0;
background-color: black;
opacity: 0.5;
width: 7px;
border-radius: 10px;
margin: 2px;
cursor: -webkit-grab;
cursor: grab;
}
.has-scroll-dragging .c-scrollbar_thumb {
cursor: -webkit-grabbing;
cursor: grabbing;
}
[data-scroll-direction="horizontal"] .c-scrollbar_thumb {
right: auto;
bottom: 0;
}
<div data-scroll-container>
<section id="section-1" data-scroll-section>
<div class="sticky" data-scroll data-scroll-sticky data-scroll-target="#section-1">
sticky content
</div>
<div>
ulum ultrices risus, vitae aliquet quam rutrum eu. Suspendisse a arcu nec nulla molestie porta nec non enim. Nulla facilisis, urna in convallis feugiat, ligula magna viverra ex, quis pharetra felis erat quis est. Proin dictum accumsan quam non fringilla.
Etiam bibendum, ipsum non rhoncus malesuada, quam ligula cursus nisi, eget maximus erat odio nec enim. Nunc ut porttitor nibh. Pellentesque neque velit, feugiat quis dapibus eget, ultrices ut odio. Fusce iaculis fermentum ipsum sed porta. Nam elit
orci, euismod sit amet sapien vitae, mollis gravida ligula. Nulla egestas, est id rutrum consectetur, arcu nibh gravida augue, sit amet efficitur magna enim in urna. Vestibulum eu lacus dictum, interdum ipsum ut, placerat enim. Quisque posuere mi
turpis, quis placerat turpis mattis vitae. Nulla in felis at dui auctor aliquam blandit a mi. Cras vitae viverra dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
</section>
<section id="section-2" data-scroll-section>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncte eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae,
eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget
dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncte eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut
metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncte eleifend tellus. Aenean leo ligula, porttitor
eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies
nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue
velit cursus nunc,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque
eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus
varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem
neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis
leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>
</section>
</div>
I have a flexbox A with 100vh height.
This flexbox contains a child flexbox B.
Flexbox B has one child with very long content. I want this very long to overflow inside it's div. Instead, flexbox A expands outside viewport.
html,
body {
margin: 0;
padding: 0;
}
body {
height: 100vh;
max-height: 100vh;
display: block;
}
.parent {
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
}
.child1 {
background: red;
height: 50px;
flex-shrink: 0;
}
.child21 {
background: green;
height: 50px;
flex-shrink: 0;
}
.child22 {
overflow: auto;
}
<html>
<body>
<div id="flexboxA" class="parent">
<div class="child1">
</div>
<div id="flexboxB" class="child2">
<div class="child21">
</div>
<div class="child22">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna quam, ultrices vel volutpat a, mollis at nisl. Maecenas sem sem, rutrum eu metus eu, eleifend sollicitudin mauris. In sit amet orci eget quam finibus ullamcorper. Morbi suscipit
id risus sagittis lacinia. Nam enter code hereeget ligula nec dui eleifend congue. Sed ac egestas sem. Nam tellus nisi, iaculis at suscipit ac, tincidunt eu risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Curabitur felis justo, aliquet vitae elit et, suscipit gravida velit. Vestibulum non odio eu ligula mollis cursus in vel orci. Curabitur non pretium purus. In sit amet ligula nibh. Maecenas mollis, magna ut placerat sagittis, nisi risus
dignissim tortor, eget pellentesque nulla massa ac odio. Fusce a dolor mi. Maecenas vel placerat dolor. Cras feugiat mauris eu nisl mattis, sit amet euismod nisi facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia curae; Nunc mollis malesuada nisl, viverra dapibus elit efficitur in. Aliquam tincidunt nec enim at vulputate. Suspendisse scelerisque mauris in tristique ornare. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Vivamus eu velit rutrum diam ultricies eleifend. Aliquam ultrices massa in arcu bibendum, ac euismod quam elementum. Proin feugiat libero in elit gravida, pulvinar ullamcorper erat molestie. Proin fermentum, ligula quis viverra
viverra, orci dui posuere tortor, eu sodales velit felis eget mi. Nunc a malesuada lectus. Donec convallis, augue in malesuada volutpat, nibh ipsum efficitur lacus, sed fringilla libero nunc eget massa. Fusce ut imperdiet est, vel congue metus.
Nunc facilisis orci nec posuere mollis. Morbi leo turpis, bibendum nec mattis id, varius non eros. Cras sem mauris, molestie a viverra quis, vestibulum vel turpis. In pellentesque rutrum arcu nec malesuada. Ut iaculis nibh sed ante elementum,
non luctus sapien vulputate. Phasellus dictum dolor nec risus blandit, eget fringilla enim pharetra. Maecenas quis quam quis leo volutpat dignissim. Aenean et tempus enim. Suspendisse eros turpis, tincidunt eu lorem eu, cursus dignissim sem. Sed
lobortis arcu sit amet nulla varius molestie. Nunc vulputate dui dolor, at ultricies ante elementum eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Etiam sed turpis consectetur, blandit mauris vitae, euismod est.
Nulla in nulla sagittis, ornare magna sit amet, suscipit mi. Ut laoreet at erat id aliquam. Suspendisse ornare odio a mi laoreet dignissim. Mauris mi magna, tincidunt sed dignissim sed, elementum eget metus. Aenean auctor nulla diam, quis feugiat
risus volutpat eu. Nulla pharetra velit aliquam magna gravida suscipit. Integer eget mauris et ante porta tristique. Morbi id tincidunt nulla.
</div>
</div>
</div>
</body>
</html>
My real code is more complex (vuejs components). Is there a way to fix this code ?
Update your code like below:
body {
margin: 0;
}
.parent {
height: 100vh;
display: flex;
flex-direction: column;
}
.child1,
.child21 {
background: red;
height: 50px;
flex-shrink: 0;
}
.child2 {
min-height: 0;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.child21 {
background: green;
}
.child22 {
overflow: auto;
}
<div id="flexboxA" class="parent">
<div class="child1">
</div>
<div id="flexboxB" class="child2">
<div class="child21">
</div>
<div class="child22">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna quam, ultrices vel volutpat a, mollis at nisl. Maecenas sem sem, rutrum eu metus eu, eleifend sollicitudin mauris. In sit amet orci eget quam finibus ullamcorper. Morbi suscipit
id risus sagittis lacinia. Nam enter code hereeget ligula nec dui eleifend congue. Sed ac egestas sem. Nam tellus nisi, iaculis at suscipit ac, tincidunt eu risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Curabitur felis justo, aliquet vitae elit et, suscipit gravida velit. Vestibulum non odio eu ligula mollis cursus in vel orci. Curabitur non pretium purus. In sit amet ligula nibh. Maecenas mollis, magna ut placerat sagittis, nisi risus
dignissim tortor, eget pellentesque nulla massa ac odio. Fusce a dolor mi. Maecenas vel placerat dolor. Cras feugiat mauris eu nisl mattis, sit amet euismod nisi facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia curae; Nunc mollis malesuada nisl, viverra dapibus elit efficitur in. Aliquam tincidunt nec enim at vulputate. Suspendisse scelerisque mauris in tristique ornare. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Vivamus eu velit rutrum diam ultricies eleifend. Aliquam ultrices massa in arcu bibendum, ac euismod quam elementum. Proin feugiat libero in elit gravida, pulvinar ullamcorper erat molestie. Proin fermentum, ligula quis viverra viverra, orci
dui posuere tortor, eu sodales velit felis eget mi. Nunc a malesuada lectus. Donec convallis, augue in malesuada volutpat, nibh ipsum efficitur lacus, sed fringilla libero nunc eget massa. Fusce ut imperdiet est, vel congue metus. Nunc facilisis
orci nec posuere mollis. Morbi leo turpis, bibendum nec mattis id, varius non eros. Cras sem mauris, molestie a viverra quis, vestibulum vel turpis. In pellentesque rutrum arcu nec malesuada. Ut iaculis nibh sed ante elementum, non luctus sapien
vulputate. Phasellus dictum dolor nec risus blandit, eget fringilla enim pharetra. Maecenas quis quam quis leo volutpat dignissim. Aenean et tempus enim. Suspendisse eros turpis, tincidunt eu lorem eu, cursus dignissim sem. Sed lobortis arcu sit
amet nulla varius molestie. Nunc vulputate dui dolor, at ultricies ante elementum eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Etiam sed turpis consectetur, blandit mauris vitae, euismod est. Nulla in nulla sagittis,
ornare magna sit amet, suscipit mi. Ut laoreet at erat id aliquam. Suspendisse ornare odio a mi laoreet dignissim. Mauris mi magna, tincidunt sed dignissim sed, elementum eget metus. Aenean auctor nulla diam, quis feugiat risus volutpat eu. Nulla
pharetra velit aliquam magna gravida suscipit. Integer eget mauris et ante porta tristique. Morbi id tincidunt nulla.
</div>
</div>
</div>
just add a height to your div with .child22 class as followed:
Learn more about overflow
html,
body {
margin: 0;
padding: 0;
}
body {
height: 100vh;
max-height: 100vh;
display: block;
}
.parent {
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
}
.child1 {
background: red;
height: 50px;
flex-shrink: 0;
}
.child21 {
background: green;
height: 50px;
flex-shrink: 0;
}
.child22 {
height:50px;
overflow: auto;
}
<html>
<body>
<div id="flexboxA" class="parent">
<div class="child1">
</div>
<div id="flexboxB" class="child2">
<div class="child21">
</div>
<div class="child22">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna quam, ultrices vel volutpat a, mollis at nisl. Maecenas sem sem, rutrum eu metus eu, eleifend sollicitudin mauris. In sit amet orci eget quam finibus ullamcorper. Morbi suscipit
id risus sagittis lacinia. Nam enter code hereeget ligula nec dui eleifend congue. Sed ac egestas sem. Nam tellus nisi, iaculis at suscipit ac, tincidunt eu risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Curabitur felis justo, aliquet vitae elit et, suscipit gravida velit. Vestibulum non odio eu ligula mollis cursus in vel orci. Curabitur non pretium purus. In sit amet ligula nibh. Maecenas mollis, magna ut placerat sagittis, nisi risus
dignissim tortor, eget pellentesque nulla massa ac odio. Fusce a dolor mi. Maecenas vel placerat dolor. Cras feugiat mauris eu nisl mattis, sit amet euismod nisi facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia curae; Nunc mollis malesuada nisl, viverra dapibus elit efficitur in. Aliquam tincidunt nec enim at vulputate. Suspendisse scelerisque mauris in tristique ornare. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Vivamus eu velit rutrum diam ultricies eleifend. Aliquam ultrices massa in arcu bibendum, ac euismod quam elementum. Proin feugiat libero in elit gravida, pulvinar ullamcorper erat molestie. Proin fermentum, ligula quis viverra
viverra, orci dui posuere tortor, eu sodales velit felis eget mi. Nunc a malesuada lectus. Donec convallis, augue in malesuada volutpat, nibh ipsum efficitur lacus, sed fringilla libero nunc eget massa. Fusce ut imperdiet est, vel congue metus.
Nunc facilisis orci nec posuere mollis. Morbi leo turpis, bibendum nec mattis id, varius non eros. Cras sem mauris, molestie a viverra quis, vestibulum vel turpis. In pellentesque rutrum arcu nec malesuada. Ut iaculis nibh sed ante elementum,
non luctus sapien vulputate. Phasellus dictum dolor nec risus blandit, eget fringilla enim pharetra. Maecenas quis quam quis leo volutpat dignissim. Aenean et tempus enim. Suspendisse eros turpis, tincidunt eu lorem eu, cursus dignissim sem. Sed
lobortis arcu sit amet nulla varius molestie. Nunc vulputate dui dolor, at ultricies ante elementum eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Etiam sed turpis consectetur, blandit mauris vitae, euismod est.
Nulla in nulla sagittis, ornare magna sit amet, suscipit mi. Ut laoreet at erat id aliquam. Suspendisse ornare odio a mi laoreet dignissim. Mauris mi magna, tincidunt sed dignissim sed, elementum eget metus. Aenean auctor nulla diam, quis feugiat
risus volutpat eu. Nulla pharetra velit aliquam magna gravida suscipit. Integer eget mauris et ante porta tristique. Morbi id tincidunt nulla.
</div>
</div>
</div>
</body>
</html>
In my wordpress posts I have a div that is half image half text. On the side where the text is I want to vertically align the text in the middle. I have tried vertical-align:middle but it did not work. Does anyone have any solutions? Thanks in advance.
css
.half-width-img{
width:50%;
height:auto;
float:left;
}
.half-width-text{
width:50%;
height:auto;
float:left;
box-sizing: border-box;
padding:0 100px 0 100px;
text-align: justify;
display: table-cell;
vertical-align: middle;
}
.half-image-half-text {
display: inline-block;
}
<div class="half-image-half-text">
<img class="half-width-img" src="IMAGE URL" />
<p class="half-width-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
do not use float, but display :)
test snippet in full page mode
display:inline-block; and html comments to erase the white-space :
.half-width-img {
width: 50%;
display: inline-block;
vertical-align: middle;
}
.half-width-text {
width: 50%;
height: auto;
display: inline-block;
box-sizing: border-box;
padding: 0 100px 0 100px;
text-align: justify;
vertical-align: middle;
}
.half-image-half-text {
}
<div class="half-image-half-text">
<img class="half-width-img" src="http://dummyimage.com/100x100" /><!--
--><p class="half-width-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla
mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
display:table; and 2 containers for each content so content can be vertical-align to middle. the tallest will set wich one will align to center
.half-width-img ,
.half-width-text {
display: table-cell;
width:50%;
box-sizing: border-box;
vertical-align: middle;
}
.half-width-text {
padding: 0 100px 0 100px;
text-align: justify;
}
.half-width-img img{
width:100%;
}
.half-image-half-text {
display:table;
width:100%;
table-layout:fixed;
}
<div class="half-image-half-text">
<div class="half-width-img"><img src="http://dummyimage.com/100x100" /></div>
<p class="half-width-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla
mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
or display:flex; flex:1; will spray both evenly, margin:auto will manage visually the vertical-align
.half-width-img {
width: 50%;
flex: 1;
margin: auto;
}
.half-width-text {
flex: 1;
margin: auto;
display: inline-block;
box-sizing: border-box;
padding: 0 100px 0 100px;
text-align: justify;
}
.half-image-half-text {display:flex;}
<div class="half-image-half-text">
<img class="half-width-img" src="http://dummyimage.com/100x100" />
<p class="half-width-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla
mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
I don't quite understand your question but I think you are looking for line-height. You can try line-height: 100%;
Do you mean center text in div? Then use text-align:center
.half-width-img{
width:50%;
height:auto;
float:left;
}
.half-width-text{
width:50%;
height:auto;
float:left;
box-sizing: border-box;
padding:0 100px 0 100px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.half-image-half-text {
display: inline-block;
}
Run code snipp
<div class="half-image-half-text">
<img class="half-width-img" src="http://s27.postimg.org/3q7ppnkyr/microsoft.jpg" /><p class="half-width-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p></div>
For the paragraph use an absolute position based on the relative position of the parent. Then translate the position.
.half-width-img{
width:50%;
height:auto;
float:left;
}
.half-width-text{
width: 50%;
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%);
color: white;
padding:0px;
margin: 0px;
text-align: center;
}
.half-image-half-text {
display: inline-block;
position: relative;
background: red;
}
<div class="half-image-half-text">
<img class="half-width-img" src="http://placehold.it/350x150"/>
<p class="half-width-text">text</p>
</div>
Try using Flexbox.
.half-image-half-text {
display : flex;
align-items : center;
}
.half-width-img, .half-width-text {
width: 50%;
}
.half-width-text {
padding: 0 100px;
}
<div class="half-image-half-text">
<img class="half-width-img" src="http://placehold.it/300x400">
<p class="half-width-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
</p>
</div>
I have some pretty inconsistent behavior for a modal I made with css. I have a 2 column layout, with content and a sidebar. I've put a modal in the sidebar because I have a button in the sidebar that toggles the modal open and close, and I kind of wanted to keep the button and modal together in the HTML.
The sidebar's content is often larger than the browser window, so to allow users to scroll it independently of the content, I've made the sidebar's position fixed and turned on overflow: scroll.
The problem is that in Safari and sometimes Chrome, the only part of the modal that is visible is the part that's inside the sidebar.
I assume I'll need to restructure my HTML, but I was wondering if there is something else I can do to make Safari render my modal correctly.
Here is an example I made of the problem
HTML
<div class="container">
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie, nunc eget lobortis efficitur, nisl augue semper lorem, vel laoreet turpis libero non magna. Donec eu massa sed quam venenatis dapibus. Quisque orci tortor, blandit ut velit eget, molestie gravida justo. In pulvinar, mi ac tempus vulputate, sapien ante bibendum mi, sed feugiat ante odio vitae orci. Phasellus mattis nisi ligula, vel eleifend dolor tincidunt vestibulum. Fusce in sodales orci. Morbi at ligula in mi fermentum dapibus ut a sapien. Donec congue arcu ac augue tristique viverra. Praesent erat libero, luctus a porta a, placerat eu nisl. Vestibulum laoreet eros vitae lorem facilisis, id aliquet sem volutpat. Quisque a nulla vitae quam interdum bibendum. Suspendisse convallis diam vitae elit tincidunt bibendum eu ut justo. Sed a dapibus diam.
</p>
<p>
Donec posuere, justo quis dictum imperdiet, nisl odio sodales nisl, id commodo erat nibh id turpis. Cras vestibulum nec mauris et blandit. Etiam dictum, orci vitae posuere scelerisque, urna mi sodales neque, eget commodo quam ex sed diam. Integer a ex cursus, interdum lacus ac, dignissim ligula. Morbi lobortis auctor rutrum. Sed finibus elit at vulputate rutrum. Nam mauris ipsum, vestibulum non tincidunt quis, hendrerit ut tellus. Etiam mollis massa lectus. Curabitur elementum eros ac libero dignissim porttitor. Curabitur augue lacus, pretium ut dolor ac, gravida laoreet risus. Aenean scelerisque tellus suscipit velit sollicitudin semper. Mauris laoreet ante vitae purus pellentesque sagittis. In at risus in ligula rhoncus hendrerit et id dolor. Vivamus pellentesque felis vel dolor malesuada, in egestas nisi ultrices.
</p>
</div>
<div class="sidebar-wrapper">
<div class="parent-sidebar">
<p>
Sed eros dui, porta vel efficitur eget, scelerisque at ante. Sed nunc quam, posuere vel pulvinar non, imperdiet et quam. Proin sed turpis eu neque placerat mollis eget sed erat. Maecenas nec fermentum urna, id pellentesque sem. Donec commodo massa et tincidunt volutpat. Fusce egestas ac nisi quis tincidunt. Ut condimentum lorem ante, in eleifend nulla dapibus vel.
</p>
<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus bibendum porttitor nulla. Integer aliquam varius neque ac facilisis. In hac habitasse platea dictumst. Sed sodales vestibulum aliquet. Aenean vestibulum nulla ut egestas vulputate. Sed quis massa ultrices nulla placerat placerat. Donec tempus justo ac lorem eleifend gravida. In ultricies vestibulum lorem, vel eleifend nunc. Mauris consequat, risus in auctor consectetur, nisl eros pulvinar mauris, a posuere felis urna a nunc. Duis at eleifend dolor.
</p>
<p>
Aliquam eu sem elit. Suspendisse dapibus diam sed mi vehicula lacinia. Duis posuere orci metus, a porta ligula porttitor in. Phasellus id aliquet augue. Quisque sit amet elit lobortis, gravida lorem sit amet, pharetra ipsum. Aliquam urna nisl, commodo eget quam a, cursus lacinia metus. Pellentesque nec nulla velit. Curabitur feugiat in ante semper euismod. Phasellus imperdiet sem quis nulla elementum commodo. Ut at maximus justo, eu accumsan elit.
</p>
<div class="child-modal">
<h1>
I'm a modal!
</h1>
</div>
</div>
</div>
</div>
CSS
.container {
width: 500px;
margin: auto;
}
.content {
width: 75%;
float: left;
padding: 1em;
box-sizing: border-box;
}
.sidebar-wrapper {
width: 25%;
float: left;
padding: 1em;
box-sizing: border-box;
}
.parent-sidebar {
width: inherit;
height: 100vh;
overflow: auto;
position: fixed;
}
.child-modal {
background: white;
position: fixed;
width: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
I made a JSfiddle to show what I mean.
I need to support >= IE9
Click Run code snippet... to see my two columns
main {
background-color: limegreen;
}
.row {
overflow: hidden;
border: 1px solid red;
margin-bottom: 15px;
}
section {
float: left;
margin: 0 2%;
width: 46%;
background-color: palegreen;
}
<main>
<div class="row">
<section>
<p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum.</p>
<p>Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</section>
<section>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</section>
</div>
<div class="row">
<section>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</section>
<section>
<p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum.</p>
<p>Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</section>
</div>
<main>
I would like the each <section> to have a matching vertical height. I'm not sure how to do this using CSS.
You can stick with float if you want, by using CSS pseudo elements + position tricks for the equal height background color, see the following snippet and comments inline.
jsfiddle
main {
background-color: limegreen;
}
.row {
overflow: hidden;
border: 1px solid red;
margin-bottom: 15px;
position: relative;
}
section {
float: left;
margin: 0 2%;
width: 46%;
background-color: palegreen;
position: relative;
z-index: 1; /* top of the pseudo elements */
}
.row:before, .row:after {
content: "";
position: absolute;
top: 0;
background: palegreen;
width: 46%; /* same as section width */
height: 100%;
}
.row:before {
left: 2%; /* left margin */
}
.row:after {
left: 52%; /* 2% + 46% + 2% + 2% */
}
<main>
<div class="row">
<section>
<p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum.</p>
<p>Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</section>
<section>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</section>
</div>
<div class="row">
<section>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</section>
<section>
<p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum.</p>
<p>Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</section>
</div>
</main>
Another approach would be CSS table + table-row + table-cell, like others already suggested in the comments above. I'm adding it here, plus the extra border-collapse + border-spacing features, for drawing the gaps. When comes to responsiveness or mobile style, you can simple reset the relevant display:table* properties back to display:block or so.
jsfiddle
main {
background-color: limegreen;
display: table;
border-collapse: separate;
table-layout: fixed;
border-spacing: 20px;
width: 100%;
}
.row {
display: table-row;
}
section {
display: table-cell;
vertical-align: top;
background: palegreen;
}
<main>
<div class="row">
<section>
<p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum.</p>
<p>Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</section>
<section>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</section>
</div>
<div class="row">
<section>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</section>
<section>
<p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum.</p>
<p>Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</section>
</div>
</main>
The outputs between the two solutions are slightly different, but mostly adjustable. One more thing on HTML syntax - the last <main> should be the closing </main>.
EDIT
Added table-layout:fixed for easy equal width of the columns, no matter how many of them.
just add display: flex; to container
main {
background-color: limegreen;
}
.row {
overflow: hidden;
border: 1px solid red;
margin-bottom: 15px;
display: flex;
}
section {
margin: 0 2%;
width: 46%;
background-color: palegreen;
}
<main>
<div class="row">
<section>
<p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum.</p>
<p>Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</section>
<section>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</section>
</div>
<div class="row">
<section>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</section>
<section>
<p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum.</p>
<p>Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</section>
</div>
<main>
If you want IE 9 support you can use Match Height JS