I am trying to vertically align an image next to a paragraph using TailwindCSS. Take a look at the following Codepen which demonstrates the problem I'm facing:
https://codepen.io/team/Cloudinary/pen/rNWPWxr
<div class="bg-red-500">
<div class="w-full m-auto mt-8 px-8 py-6 items-center mb-6">
<img class="float-right align-middle sm:block" src="https://res.cloudinary.com/tamas-demo/image/upload/w_200,h_200,c_thumb,g_face,r_max,f_auto,q_auto,z_0.7/woman.jpg" />
<p class="text-white leading-normal font-bold text-2xl lg:text-3xl mb-8" id="greeting">Hi hi hi</p>
<p class="text-white leading-normal justify-between font-normal md:text-xl lg:text-2xl sm:w-3/4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc odio ante, placerat eget mollis vitae, vehicula congue magna. Fusce euismod ac tortor quis varius. Nullam quis arcu mauris. Nunc sit amet elit non dolor varius luctus. Fusce eget odio imperdiet ex cursus hendrerit. Aenean quis enim eu ante blandit venenatis. Nullam quis sollicitudin neque. Aenean hendrerit fringilla risus, pellentesque elementum neque.
Cras pretium a arcu quis cursus. Donec eu nisl scelerisque, venenatis neque a, consectetur magna. Suspendisse vestibulum neque vel metus feugiat maximus. Aliquam eu ligula vitae dui consectetur venenatis. Sed iaculis convallis nisi. Etiam placerat varius sem, non placerat neque consectetur et. Duis id risus lacinia ligula euismod aliquet et quis nibh. Sed odio mi, consectetur ac eros id, blandit interdum libero. Suspendisse potenti. Vestibulum bibendum sapien sed commodo pharetra. Fusce venenatis eget arcu et eleifend. Aliquam erat volutpat.
</p>
</div>
</div>
I can't seem to vertically align the image on the right side.
Use this code.
<div class="bg-red-500">
<div class="w-full m-auto mt-8 px-8 py-6 items-center mb-6" style = "display: flex; flex-direction: row-reverse;">
<img class=" align-middle sm:block" src="https://res.cloudinary.com/tamas-demo/image/upload/w_200,h_200,c_thumb,g_face,r_max,f_auto,q_auto,z_0.7/woman.jpg"/>
<div>
<p class="text-white leading-normal font-bold text-2xl lg:text-3xl mb-8" id="greeting">Hi hi hi</p>
<p class="text-white leading-normal justify-between font-normal md:text-xl lg:text-2xl sm:w-3/4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc odio ante, placerat eget mollis vitae, vehicula congue magna. Fusce euismod ac tortor quis varius. Nullam quis arcu mauris. Nunc sit amet elit non dolor varius luctus. Fusce eget odio imperdiet ex cursus hendrerit. Aenean quis enim eu ante blandit venenatis. Nullam quis sollicitudin neque. Aenean hendrerit fringilla risus, pellentesque elementum neque.
Cras pretium a arcu quis cursus. Donec eu nisl scelerisque, venenatis neque a, consectetur magna. Suspendisse vestibulum neque vel metus feugiat maximus. Aliquam eu ligula vitae dui consectetur venenatis. Sed iaculis convallis nisi. Etiam placerat varius sem, non placerat neque consectetur et. Duis id risus lacinia ligula euismod aliquet et quis nibh. Sed odio mi, consectetur ac eros id, blandit interdum libero. Suspendisse potenti. Vestibulum bibendum sapien sed commodo pharetra. Fusce venenatis eget arcu et eleifend. Aliquam erat volutpat.
</p>
</div>
</div>
</div>
Related
I am working on my portfolio page and as I was writing my html and my css, the site wasn't scrolling. I can't see the code only the first section.
Here is the html:
<navbar id="navbar">
<img id="logo" src="imagini/portfolio.png" alt="my portfolio" title="Bogdan's portfolio" />
<ul type="none" id="list">
<li>works</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
<section id="welcome-section">
<h1>HI, I'M<br /> Pavel Bogdan Mihail</h1>
<p>I make people get amazed by my works because I'm AWSOME!</p>
<button type="button">GET IN TOUCH</button>
</section>
<section id="about">
<h3>A little bit about me</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis neque sed massa sollicitudin interdum. Pellentesque vel libero sollicitudin lectus sollicitudin consectetur. In dictum eu nisi id porta. Ut molestie luctus hendrerit. Nulla ac nisl sit amet urna molestie dictum. Phasellus et turpis aliquet dolor iaculis congue. Nulla eget ligula nibh. Maecenas vel aliquam quam, sit amet semper nibh. Sed consectetur malesuada mauris a posuere. Suspendisse semper, magna ac convallis faucibus, orci eros ultrices diam, ac porttitor enim sem eget lorem. Proin laoreet commodo arcu, nec lobortis felis dapibus quis. Aenean ut arcu mauris. Nunc tempus erat eu felis faucibus facilisis. Donec gravida ullamcorper dolor ac dapibus. Sed pellentesque dapibus neque, quis ornare purus tincidunt ac.</p>
</section>
here is a codepen edit: https://codepen.io/bogdan-pavel/pen/pobgWjg
Your navbar is missing a closing tag. If you ad </navbar> after the navbar is done the rest will scroll.
Try this:
<navbar id="navbar">
<img id="logo" src="imagini/portfolio.png" alt="my portfolio" title="Bogdan's portfolio" />
<ul type="none" id="list">
<li>works</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
<section id="welcome-section">
<h1>HI, I'M<br /> Pavel Bogdan Mihail</h1>
<p>I make people get amazed by my works because I'm AWSOME!</p>
<button type="button">GET IN TOUCH</button>
</section>
<section id="about">
<h3>A little bit about me</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis neque sed massa sollicitudin interdum. Pellentesque vel libero sollicitudin lectus sollicitudin consectetur. In dictum eu nisi id porta. Ut molestie luctus hendrerit. Nulla ac nisl sit amet urna molestie dictum. Phasellus et turpis aliquet dolor iaculis congue. Nulla eget ligula nibh. Maecenas vel aliquam quam, sit amet semper nibh. Sed consectetur malesuada mauris a posuere. Suspendisse semper, magna ac convallis faucibus, orci eros ultrices diam, ac porttitor enim sem eget lorem. Proin laoreet commodo arcu, nec lobortis felis dapibus quis. Aenean ut arcu mauris. Nunc tempus erat eu felis faucibus facilisis. Donec gravida ullamcorper dolor ac dapibus. Sed pellentesque dapibus neque, quis ornare purus tincidunt ac.</p>
</section>
<navbar>
Trying to make a kind of 'master-detail' layout with angular material in an electron app.
kinda like this:
I have a toolbar that i want always pinned to the top, and 2 'columns' that should scroll independently, and are full height (minus the height of the toolbar...)
But despite tries putting md-content tags in different places, and messing with css display and positioning... i havent been able to nail this!
what is the 'right' (read: angular material) way to do this? it's gotta have something to do with flexbox css somewhere?
Here you go - CodePen
The main things to point out are
layout-fill and layout="column" in the top div
overflow: auto for the content
Markup
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="column">
<md-toolbar class="md-hue-2">
<div class="md-toolbar-tools">
<md-button class="md-icon-button" aria-label="Settings" ng-disabled="true">
<md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
</md-button>
<h2>
<span>Toolbar with Disabled/Enabled Icon Buttons</span>
</h2>
<span flex></span>
<md-button class="md-icon-button" aria-label="Favorite">
<md-icon md-svg-icon="img/icons/favorite.svg" style="color: greenyellow;"></md-icon>
</md-button>
<md-button class="md-icon-button" aria-label="More">
<md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon>
</md-button>
</div>
</md-toolbar>
<md-content layout="row" flex>
<md-list id="list" flex="20">
<md-list-item
class="md-3-line"
ng-repeat="item in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
ng-click="null">
<div class="md-list-item-text" layout="column">
<h3>Hello world</h3>
<h4>Blah blah</h4>
<p>123456789</p>
</div>
</md-list-item>
</md-list>
<md-tabs md-border-bottom flex="80">
<md-tab label="one">
<md-content class="tabContent" class="md-padding">
<h1 class="md-display-2">Tab One</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.</p>
</md-content>
</md-tab>
<md-tab label="two">
<md-content class="tabContent" class="md-padding">
<h1 class="md-display-2">Tab Two</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit. Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec orci posuere, nec luctus mauris semper.</p>
<p>Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis. Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel. Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed nisl consectetur, rhoncus sapien sit amet, tempus sapien.</p>
<p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit. Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec orci posuere, nec luctus mauris semper.</p>
<p>Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis. Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel. Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed nisl consectetur, rhoncus sapien sit amet, tempus sapien.</p>
<p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
</md-content>
</md-tab>
<md-tab label="three">
<md-content class="tabContent" class="md-padding">
<h1 class="md-display-2">Tab Three</h1>
<p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
</md-content>
</md-tab>
</md-tabs>
</md-content>
</div>
CSS
#list {
border-right: 1px solid #DDD;
overflow: auto;
}
.tabContent {
overflow: auto;
}
This is a JSFiddle that shows my attempt at positioning 3 buttons at the bottom of 3 columns. I have used flexbox to make sure that all 3 columns have the same height, but in order to make the buttons positioned at the bottom of each column, I had to make them absolutely positioned. As a result, the size of the buttons, is not taken in account for the column's size. Is there any proper way to avoid that (without using placeholder elements/margins/etc)?
HTML:
<div class="container">
<div class="row row-same-height">
<div class="col-md-4">
<h2>Responsive</h2>
<!--<h4> εξαρτημένη από το ένα άκρο </h4>-->
<p style="text-align: justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id varius leo. Aliquam erat volutpat. Proin tempor lorem et dolor sollicitudin, in dignissim arcu blandit. Nullam consectetur rutrum pretium. Vivamus imperdiet elementum neque,
vel volutpat leo mattis in. Nam luctus pellentesque dui sed vulputate. Curabitur faucibus fringilla lectus, ut aliquet mauris dictum facilisis.</p>
<p class="stick-to-bottom"><a class="btn btn-primary" href="per1.html" role="button">View
details »</a></p>
</div>
<div class="col-md-4">
<h2>But</h2>
<p style="text-align: justify">Aliquam id congue libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed ullamcorper sapien nulla, eget fermentum est mattis non. Morbi tortor tellus, sollicitudin quis nisi at, hendrerit faucibus nisl. Aenean consequat felis
urna, ut eleifend sapien tempus a. Phasellus porta mi non venenatis condimentum. Aliquam ut dolor eleifend, maximus quam vitae, scelerisque leo. Praesent metus est, lobortis eget urna a, luctus condimentum eros. Curabitur gravida maximus augue
molestie ultricies. Mauris ac urna ac lorem sagittis auctor. Etiam facilisis rhoncus sapien, at aliquam ligula euismod ac. Vestibulum quis condimentum neque. Morbi ornare aliquam consectetur. Mauris ipsum ligula, vulputate sed tristique hendrerit,
pellentesque fringilla nisl.</p>
<p class="stick-to-bottom"><a class="btn btn-primary" href="per2.html" role="button">View
details »</a></p>
</div>
<div class="col-md-4">
<h2>Wrong</h2>
<p style="text-align: justify">Duis eu nibh viverra, pretium risus id, egestas odio. Suspendisse potenti. Praesent aliquet massa sit amet nunc bibendum pellentesque. Mauris consectetur auctor magna vel consequat. Aliquam sit amet nunc quam. Vivamus eu nisi ac est viverra vehicula
lobortis sit amet lorem. Cras ut pellentesque nisi. Curabitur ornare imperdiet quam sit amet efficitur. Vivamus viverra felis at bibendum aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec
vestibulum, quam id efficitur consequat, ipsum dolor sollicitudin augue, id mollis erat risus quis urna. Integer aliquet suscipit orci, vehicula cursus lectus malesuada in. </p>
<p class="stick-to-bottom"><a class="btn btn-primary" href="per3.html" role="button">View
details »</a></p>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row row-same-height">
<div class="col-md-4">
<h2>Looks as intended</h2>
<!--<h4> εξαρτημένη από το ένα άκρο </h4>-->
<p style="text-align: justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id varius leo. Aliquam erat volutpat. Proin tempor lorem et dolor sollicitudin, in dignissim arcu blandit. Nullam consectetur rutrum pretium. Vivamus imperdiet elementum neque,
vel volutpat leo mattis in. Nam luctus pellentesque dui sed vulputate. Curabitur faucibus fringilla lectus, ut aliquet mauris dictum facilisis.</p>
</div>
<div class="col-md-4">
<h2>But</h2>
<p style="text-align: justify">Aliquam id congue libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed ullamcorper sapien nulla, eget fermentum est mattis non. Morbi tortor tellus, sollicitudin quis nisi at, hendrerit faucibus nisl. Aenean consequat felis
urna, ut eleifend sapien tempus a. Phasellus porta mi non venenatis condimentum. Aliquam ut dolor eleifend, maximus quam vitae, scelerisque leo. Praesent metus est, lobortis eget urna a, luctus condimentum eros. Curabitur gravida maximus augue
molestie ultricies. Mauris ac urna ac lorem sagittis auctor. Etiam facilisis rhoncus sapien, at aliquam ligula euismod ac. Vestibulum quis condimentum neque. Morbi ornare aliquam consectetur. Mauris ipsum ligula, vulputate sed tristique hendrerit,
pellentesque fringilla nisl.</p>
</div>
<div class="col-md-4">
<h2>Not Responsive</h2>
<p style="text-align: justify">Duis eu nibh viverra, pretium risus id, egestas odio. Suspendisse potenti. Praesent aliquet massa sit amet nunc bibendum pellentesque. Mauris consectetur auctor magna vel consequat. Aliquam sit amet nunc quam. Vivamus eu nisi ac est viverra vehicula
lobortis sit amet lorem. Cras ut pellentesque nisi. Curabitur ornare imperdiet quam sit amet efficitur. Vivamus viverra felis at bibendum aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec
vestibulum, quam id efficitur consequat, ipsum dolor sollicitudin augue, id mollis erat risus quis urna. Integer aliquet suscipit orci, vehicula cursus lectus malesuada in. </p>
</div>
</div>
<div class="row">
<p class="col-md-4"><a class="btn btn-primary" href="per1.html" role="button">Viewdetails »</a></p>
<p class="col-md-4"><a class="btn btn-primary" href="per2.html" role="button">View details »</a></p>
<p class="col-md-4"><a class="btn btn-primary" href="per3.html" role="button">View details »</a></p>
</div>
</div>
CSS:
.row-same-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.stick-to-bottom {
position: absolute;
bottom: 0;
}
You're already using flexbox, so use flexbox. Why on earth would you absolutely position?
All you'll need is to flex the columns vertically (use flex-direction: column) and use justify-content: space-between. You'll also probably want to put: flex: 1 on the <p> tags that have the text content in them (since the content varies in length):
.row-same-height .col-md-4 {
display: flex;
flex-flow: column nowrap; /* a shorthand for `flex-direction` and `flex-wrap` */
justify-content: space-between;
}
.row-same-height p:first-of-type {
flex: 1;
}
And add whatever vendor prefixes you like. Here's your updated Fiddle. Cheers!
I have the following HTML layout:
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
The number of children and their heights can vary. Is it possible to style the parent element to divide the children into two columns, such that the parent takes the minimum possible height?
.parent {
display: flex;
flex-flow: column wrap;
margin: 0 -5px;
width: 500px;
height: 1500px; /* I want to remove this */
}
.child {
margin: 0 5px 10px;
width: 50%;
background: #f2f2f2;
border: 1px #ccc solid;
padding: 20px;
}
<div class="parent">
<div class="child">
<h3>Heading 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc gravida, bibendum magna ut, rutrum dui. Vivamus pulvinar, tellus at tempor imperdiet, elit lectus eleifend dui, in molestie nisi mauris at sem. Nulla varius sapien ipsum, sed semper
nisl lacinia vel. Maecenas aliquet, ante eu feugiat iaculis, massa diam tincidunt est, id ornare nisi massa nec arcu. Nunc porta leo at diam aliquam eleifend. Cras vel diam dignissim, egestas lacus in, egestas ipsum. Aliquam ultricies justo et magna
dignissim auctor.</p>
</div>
<div class="child">
<h3>Heading 2</h3>
<p>Nam scelerisque hendrerit efficitur. Fusce quam mi, viverra ut enim sit amet, viverra dignissim tortor. Quisque laoreet eros sit amet ex rutrum pharetra. </p>
</div>
<div class="child">
<h3>Heading 3</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi tortor orci, hendrerit vel diam et, rhoncus pellentesque quam. Donec nec porttitor urna. Nam interdum a tellus in bibendum. Etiam ac ultricies elit.
</p>
</div>
<div class="child">
<h3>Heading 4</h3>
<p>Morbi quis tortor interdum, ornare nibh interdum, maximus quam. Praesent elit urna, sodales sed mollis in, euismod quis ex. Maecenas nec tellus eu lectus varius placerat sed id eros. Donec imperdiet vulputate neque at varius. Sed nunc mauris, pretium
pretium fringilla ut, consequat sit amet ligula. Aliquam velit odio, pharetra at tincidunt ut, interdum ut augue. Mauris ultrices, mi et congue accumsan, tellus nisl semper justo, ut consectetur purus tellus ut ipsum. Suspendisse a neque eros. Suspendisse
sit amet lacus id tortor porta lobortis. Nam tincidunt, sem id porta congue, lectus dui iaculis enim, ac tristique erat mauris et mauris. Praesent neque mi, semper ornare ullamcorper eget, commodo a mauris. Curabitur sed commodo diam, a ullamcorper
quam.</p>
</div>
<div class="child">
<h3>Heading 5</h3>
<p>Sed sit amet sem metus. Pellentesque id rhoncus felis, nec condimentum ligula. Aliquam porta erat sapien, ac efficitur nisi blandit a. Nulla congue urna ac nisi tempor ultrices. Nunc eget risus ut tortor iaculis facilisis.</p>
</div>
<div class="child">
<h3>Heading 6</h3>
<p>Fusce malesuada et magna eu dapibus. Vivamus aliquam venenatis libero, quis lobortis ante luctus nec. Nullam vel lectus justo. Etiam diam turpis, auctor in finibus eget, eleifend vel ex. Curabitur sit amet neque ex. Nulla dapibus placerat tortor,
ac viverra arcu finibus mattis. Donec vel sem urna. Phasellus pretium ultricies ipsum, eu mollis magna rutrum sed. Mauris varius accumsan diam, a aliquet nibh tincidunt ac. Proin lobortis nunc eget enim pharetra, eu lobortis nisi placerat. Aliquam
enim tortor, viverra non posuere ut, dapibus sed elit.</p>
</div>
<div class="child">
<h3>Heading 7</h3>
<p>Sed molestie congue lacinia. Proin cursus laoreet magna, a pharetra odio consequat et. Donec et ullamcorper massa. Fusce eu dapibus felis. Cras condimentum purus et eros finibus aliquam. In hac habitasse platea dictumst. Sed sit amet sem metus. Pellentesque
id rhoncus felis, nec condimentum ligula. Aliquam porta erat sapien, ac efficitur nisi blandit a. Nulla congue urna ac nisi tempor ultrices. Nunc eget risus ut tortor iaculis facilisis.</p>
</div>
</div>
http://codepen.io/anon/pen/NqLYjE
In the above example, I was able to achieve the two column layout by setting height for the parent element. I want to do it without setting the height. Is it possible?
Setting flex-direction to row is ugly, as there will be whitespace between two vertical child elements when the height of children on a single row are unequal.
I believe you need the column propertie and not the flex model.
forked pen
.parent {
-moz-column-count:2;
column-count:2;
-moz-column-gap:0;
column-gap:0;
margin: 0 -5px;
width: 500px;
}
.child {
margin: 0 5px 10px;
background: #f2f2f2;
border: 1px #ccc solid;
padding: 20px;
}
<div class="parent">
<div class="child">
<h3>Heading 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc gravida, bibendum magna ut, rutrum dui. Vivamus pulvinar, tellus at tempor imperdiet, elit lectus eleifend dui, in molestie nisi mauris at sem. Nulla varius sapien ipsum, sed semper
nisl lacinia vel. Maecenas aliquet, ante eu feugiat iaculis, massa diam tincidunt est, id ornare nisi massa nec arcu. Nunc porta leo at diam aliquam eleifend. Cras vel diam dignissim, egestas lacus in, egestas ipsum. Aliquam ultricies justo et magna
dignissim auctor.</p>
</div>
<div class="child">
<h3>Heading 2</h3>
<p>Nam scelerisque hendrerit efficitur. Fusce quam mi, viverra ut enim sit amet, viverra dignissim tortor. Quisque laoreet eros sit amet ex rutrum pharetra. </p>
</div>
<div class="child">
<h3>Heading 3</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi tortor orci, hendrerit vel diam et, rhoncus pellentesque quam. Donec nec porttitor urna. Nam interdum a tellus in bibendum. Etiam ac ultricies elit.
</p>
</div>
<div class="child">
<h3>Heading 4</h3>
<p>Morbi quis tortor interdum, ornare nibh interdum, maximus quam. Praesent elit urna, sodales sed mollis in, euismod quis ex. Maecenas nec tellus eu lectus varius placerat sed id eros. Donec imperdiet vulputate neque at varius. Sed nunc mauris, pretium
pretium fringilla ut, consequat sit amet ligula. Aliquam velit odio, pharetra at tincidunt ut, interdum ut augue. Mauris ultrices, mi et congue accumsan, tellus nisl semper justo, ut consectetur purus tellus ut ipsum. Suspendisse a neque eros. Suspendisse
sit amet lacus id tortor porta lobortis. Nam tincidunt, sem id porta congue, lectus dui iaculis enim, ac tristique erat mauris et mauris. Praesent neque mi, semper ornare ullamcorper eget, commodo a mauris. Curabitur sed commodo diam, a ullamcorper
quam.</p>
</div>
<div class="child">
<h3>Heading 5</h3>
<p>Sed sit amet sem metus. Pellentesque id rhoncus felis, nec condimentum ligula. Aliquam porta erat sapien, ac efficitur nisi blandit a. Nulla congue urna ac nisi tempor ultrices. Nunc eget risus ut tortor iaculis facilisis.</p>
</div>
<div class="child">
<h3>Heading 6</h3>
<p>Fusce malesuada et magna eu dapibus. Vivamus aliquam venenatis libero, quis lobortis ante luctus nec. Nullam vel lectus justo. Etiam diam turpis, auctor in finibus eget, eleifend vel ex. Curabitur sit amet neque ex. Nulla dapibus placerat tortor,
ac viverra arcu finibus mattis. Donec vel sem urna. Phasellus pretium ultricies ipsum, eu mollis magna rutrum sed. Mauris varius accumsan diam, a aliquet nibh tincidunt ac. Proin lobortis nunc eget enim pharetra, eu lobortis nisi placerat. Aliquam
enim tortor, viverra non posuere ut, dapibus sed elit.</p>
</div>
<div class="child">
<h3>Heading 7</h3>
<p>Sed molestie congue lacinia. Proin cursus laoreet magna, a pharetra odio consequat et. Donec et ullamcorper massa. Fusce eu dapibus felis. Cras condimentum purus et eros finibus aliquam. In hac habitasse platea dictumst. Sed sit amet sem metus. Pellentesque
id rhoncus felis, nec condimentum ligula. Aliquam porta erat sapien, ac efficitur nisi blandit a. Nulla congue urna ac nisi tempor ultrices. Nunc eget risus ut tortor iaculis facilisis.</p>
</div>
</div>
I've created a quick demo of the problem I'm having here: http://www.bootply.com/Nb2PUnwINT
The behaviour for small screens and below is perfect here, but on medium/large screens the yellow column I want to be along side the green one.
Is this possible? Hopefully I've provided enough detail here.
Please check with the below code
<div class="row">
<div class="col-sm-12 col-md-9 col-lg-9">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12" style="background-color:green">
Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque porta felis a ex egestas ultrices. Duis vel lorem nulla. Vestibulum eget risus nec felis hendrerit aliquet. Sed et tempus tellus. Curabitur congue magna lacus, facilisis rhoncus neque finibus hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Nunc sed viverra nunc. Ut venenatis dapibus odio vel viverra. Nullam sem justo, scelerisque et fringilla quis, ullamcorper id diam. Suspendisse vitae justo porta, molestie diam vitae, pulvinar nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ut felis lacus. Etiam quis pretium dolor. Nulla eu rutrum erat. Ut hendrerit et diam ac eleifend. Suspendisse mollis elit lorem, ultrices fermentum erat convallis mattis. Duis congue mattis magna non elementum. Ut ultricies vitae ante sit amet tempor.
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-3">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12" style="background-color:red">
Lorem ipsum dolor sit a
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12" style="background-color:yellow">
met, consectetur adipiscing elit. Vestibulum eget odio ut lectus dignissim varius. Praesent volutpat, dui quis ultricies pellentesque, sem ipsum volutpat libero, in fermentum leo nisl a orci. Praesent gravida elit ac felis interdum, at elementum lacus tristique. Curabitur dignissim metus tristique vehicula iaculis. Quisque mattis tincidunt tellus, et aliquet arcu aliquet ut. Vestibulum vel metus nec ipsum sagittis aliquet in sit amet erat. Praesent pellentesque sit amet massa sed lobortis. Proin blandit consectetur egestas. Nulla cursus tortor turpis, nec tempor metus viverra et. Quisque id auctor arcu, ac posuere eros. Curabitur ac tincidunt purus. Integer scelerisque quis ex vitae volutpat. Donec non pretium turpis.
Duis dolor felis, convallis non venenatis ut, vulputate in ipsum. Etiam nisi tortor, finibus sit amet tellus non, bibendum sollicitudin enim. Proin in mollis neque, id faucibus felis. Proin cursus tristique mollis. Proin eget aliquam orci. Suspendisse egestas consequat magna quis ornare. Duis maximus dui sit amet neque fermentum aliquam.
</div>
</div>
</div>
</div>