I am trying to create something similar to https://www.pinterest.com/ homepage where height is decided as per content of Div & all divs automatically adjusts it self using bootstrap.
I tried to do it but It is not working as expected.
Here is fiddle link of what I have tried http://jsfiddle.net/gmm2jcn5/
In fiddle we can see that there is white gap between 2 divs I want to eliminate that gap.
.col-xs-6 {
border: 1px solid black;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.1/bootstrap.min.js"></script>
<div class="row">
<div class="col-xs-6">
<p class="inntertopheading">heading</p>
<div class="hr"></div>
<div class="innter-md-text">
text
<div class="spacer10"></div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div class="col-xs-6">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="col-xs-6">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="col-xs-6">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
</div>
</div>
vaibhav shah Hi there.
To have each div block have the same Height no matter the content you could use a little jquery like this...
$(document).ready( function(){
var heightArray = $(".block1").map( function(){
return $(this).height();
}).get();
var maxHeight = Math.max.apply( Math, heightArray);
$(".block2").height(maxHeight);
$(".block3").height(maxHeight);
})
Here is a working Fiddle.
Does this help for what you are wanting here?
If you resize the window with your mouse just refresh and see the div blocks change to all having the same height.
Try the CSS3 column method, this will only require CSS, no modification of markup. The below script will adjust anywhere from 1 to 5 columns based on viewport width:
.col-xs-6 {
display: inline-block;
width: 100%;
border: 1px solid black;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
-o-column-break-inside: avoid;
-ms-column-break-inside: avoid;
column-break-inside: avoid;
}
/* Custom, iPhone Retina */
#media only screen and (min-width: 320px) {
.row {
-moz-column-count: 1;
-moz-column-gap: 0px;
-webkit-column-count: 1;
-webkit-column-gap: 0px;
column-count: 1;
column-gap: 0px;
width: 100%;
}
}
/* Extra Small Devices, Phones */
#media only screen and (min-width: 480px) {
.row {
-moz-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;
width: 100%;
}
}
/* Small Devices, Tablets */
#media only screen and (min-width: 768px) {
.row {
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
width: 100%;
}
}
/* Medium Devices, Desktops */
#media only screen and (min-width: 992px) {
.row {
-moz-column-count: 4;
-moz-column-gap: 10px;
-webkit-column-count: 4;
-webkit-column-gap: 10px;
column-count: 4;
column-gap: 10px;
width: 100%;
}
}
/* Large Devices, Wide Screens */
#media only screen and (min-width: 1200px) {
.row {
-moz-column-count: 5;
-moz-column-gap: 10px;
-webkit-column-count: 5;
-webkit-column-gap: 10px;
column-count: 5;
column-gap: 10px;
width: 100%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.1/bootstrap.min.js"></script>
<div class="row">
<div class="col-xs-6">
<p class="inntertopheading">heading</p>
<div class="hr"></div>
<div class="innter-md-text">
text
<div class="spacer10"></div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div class="col-xs-6">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="col-xs-6">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="col-xs-6">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
</div>
</div>
Related
I was trying to create a layout with 5 columns,
the height should be stretch by its content,
so i cannot set a fixed height for it,
but it doesn't work in my codepen work
https://codepen.io/yyywork/pen/MWGLJwN
body {
height: 100%;
}
#outer-container {
display: flex;
flex-direction: row;
height: 100%;
}
#inner-container {
flex-grow: 1;
column-count: 5;
height: 100%;
}
.item {
break-inside: avoid;
height: 100%;
}
<div id="outer-container">
<div id="inner-container">
<div class="item item-1">
<b>Col 1</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type sp
</div>
<div class="item item-2">
<b>Col 2</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="item item-3">
<b>Col 3</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="item item-4">
<b>Col 4</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="item item-5">
<b>Col 5</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type sp
</div>
</div>
</div>
Try to use below CSS its working perfectly on Chrome and Mozilla Firefox.
#inner-container {
display: flex;
flex-direction: row;
align-items: stretch;
}
.item {
flex-basis: calc(100% / 5);
border:1px solid #000;
}
<div id="outer-container">
<div id="inner-container">
<div class="item item-1">
<b>Col 1</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type sp
</div>
<div class="item item-2">
<b>Col 2</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="item item-3">
<b>Col 3</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="item item-4">
<b>Col 4</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="item item-5">
<b>Col 5</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type sp
</div>
</div>
</div>
I'm trying to create a page using css grid and flex. I have defined the grid areas and positioned them.
When I'm adding content to blog-post-list section contents goes beyond <section> the specified area.
I'm expecting 3rd and 4th blog-card boxes to go to next row rather than going across the aside. Shouldn't it act like a container if it has more content its height get increase ?
TIA
body{
color: #000;
text-align: center;
}
.content{
display:grid;
grid-template-columns: repeat(12,1fr);
grid-auto-rows: minmax(50px, auto);
grid-gap: 2px;;
max-width:960px;
margin: 0 auto;
}
.content > *{
background: #3bbced;
padding: 30px;
}
header{
grid-column: 1/13;
}
nav{
grid-column: 1/13;
}
section{
grid-column: 1/8;
grid-row: 3/9;
}
aside{
grid-column: 8 /13;
grid-row: 3/9;
}
footer{
grid-column: 1 / 13;
}
.blog-post-list{
display: flex;
}
.blog-card{
border: 1px solid black;
padding: 20px;
margin: 15px;
min-width: 38%;
}
<div class="content">
<header>
header
</header>
<nav>
Navigation
</nav>
<section>
<div class="blog-post-list">
<div class="blog-card">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
<div class="blog-card">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
<div class="blog-card">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
<div class="blog-card">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
</div>
</section>
<aside>
aside
</aside>
<footer>
Footer
</footer>
</div>
You should change this part with flex-wrap. If you want to have all in same row then you should give smaller percentage for child elements
.blog-post-list{
display: flex;
flex-wrap: wrap;
}
body{
color: #fff;
text-align: center;
}
.content{
display:grid;
grid-template-columns: repeat(12,1fr);
grid-auto-rows: minmax(50px, auto);
grid-gap: 2px;;
max-width:960px;
margin: 0 auto;
}
.content > *{
background: #3bbced;
padding: 30px;
}
header{
grid-column: 1/13;
}
nav{
grid-column: 1/13;
}
section{
grid-column: 1/8;
grid-row: 3/9;
}
aside{
grid-column: 8 /13;
grid-row: 3/9;
}
footer{
grid-column: 1 / 13;
}
.blog-post-list{
display: flex;
flex-wrap: wrap;
}
.blog-card{
border: 1px solid black;
padding: 20px;
margin: 15px;
min-width: 38%;
}
<div class="content">
<header>
header
</header>
<nav>
Navigation
</nav>
<section>
<div class="blog-post-list">
<div class="blog-card">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
<div class="blog-card">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
<div class="blog-card">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
<div class="blog-card">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
</div>
</section>
<aside>
aside
</aside>
<footer>
Footer
</footer>
</div>
My issues:
I am creating a webiste with articles and I have to make that site for responsive.
I am using CSS GRID for my site. I have a problem on mobile devices.
I have two types of articles (picture on the left and picture on the right). But when viewed on mobile devices, these two pictures are not under the articles. The image from the first articles should be at the bottom.
#news_content {
padding: 215px 15px 0px 15px;
}
#news_content>.row {
grid-template-columns: repeat(12, 8.533333%);
}
#news_content>.row>.col-1 {
grid-column: span 6;
}
#news_content>.row>.col-1>.col-1-padding {
padding: 20px 0px 0px 30px;
}
#news_content>.row>.col-2 {
grid-column: span 6;
}
#news_content>.row>.col-2>.col-2-padding {
padding: 20px 0px 20px 30px;
}
#media (max-width: 720px) {
#news_content>.row>.col-1,
#news_content>.row>.col-2 {
grid-column: span 12;
}
}
#media (max-width: 720px) {
#news_content {
padding: 50px 45px 0px 15px;
}
}
<div id="news_content" class="grid">
<div class="row">
<div class="col-1">
<div class="col-1-padding">
<img src="https://via.placeholder.com/300x200" id="Image_style">
</div>
</div>
<div class="col-2">
<div class="col-2-padding">
<h1>Lorem Lorem?</h1>
<p class="news">
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem
Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</div>
</div>
</div>
<div id="news_content" class="grid">
<div class="row">
<div class="col-1">
<div class="col-1-padding">
<h1>Lorem Lorem?</h1>
<p class="news">
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p>
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem
Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</div>
<div class="col-2">
<div class="col-2-padding">
<img src="https://via.placeholder.com/300x200" id="Image_style">
</div>
</div>
</div>
</div>
<div id="news_content" class="grid">
<div class="row">
<div class="col-1">
<div class="col-1-padding">
<img src="img/poco.jpg" id="Image_style">
</div>
</div>
<div class="col-2">
<div class="col-2-padding">
<h1>Lorem Lorem?</h1>
<p class="news">
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</div>
</div>
</div>
<div id="news_content" class="grid">
<div class="row">
<div class="col-1">
<div class="col-1-padding">
<h1>Lorem Lorem?</h1>
<p class="news">
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p>
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</div>
<div class="col-2">
<div class="col-2-padding">
<img src="img/video.jpg" id="Image_style">
</div>
</div>
</div>
</div>
#news_content
{
padding: 215px 15px 0px 15px;
}
#news_content > .row
{
grid-template-columns: repeat(12, 8.533333%);
}
#news_content > .row > .col-1
{
grid-column: span 6;
}
#news_content > .row > .col-1 > .col-1-padding
{
padding: 20px 0px 0px 30px;
}
#news_content > .row > .col-2
{
grid-column: span 6;
}
#news_content > .row > .col-2 > .col-2-padding
{
padding: 20px 0px 20px 30px;
}
#media (max-width: 720px)
{
#news_content > .row > .col-1, #news_content > .row > .col-2
{
grid-column: span 12;
}
}
#media (max-width: 720px)
{
#news_content
{
padding: 50px 45px 0px 15px;
}
}
I'm creating multiple 3 column divs on a page. I noticed that if the left column div (data_cell1) is longer than the right column div (data_cell3). The div below goes up into the div above and overlaps it.
What do I need to change in my css to allow there to be separation between each div wrapper?
If the left column div and right column div are the same size, then I don't have this problem.
Here's the code example:
http://jsfiddle.net/huskydawgs/UMf3k/77/
<div class="wrapper-data">
<div class="data_row">
<div class="data_cell1">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="data_cell2">
</div>
<div class="data_cell3">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
</div>
<div class="wrapper-data">
<div class="data_row">
<div class="data_cell1">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
</div>
<div class="data_cell2">
</div>
<div class="data_cell3">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
</div>
</div>
<div class="wrapper-data">
<div class="data_row">
<div class="data_cell1">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
</div>
<div class="data_cell2">
</div>
<div class="data_cell3">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
</div>
</div>
Since you are using float on some elements you need to clear after to make the parent take the complete height, I use this technique:
.data_row:after {
content:" ";
display:block;
clear:both;
}
You can see more about this here and your demo here
Add overflow: hidden (or anything different than visible) to elements which contain floating elements.
Demo
I would like to have a div which contains 4 columns inside it.
Where as each column will have a div with its contents (Where as some contents are huge and some are lesser).
Instead of me explaining it please have a look at this image:
)
And kindly help me in achieving this layout.
Thank you in advance.
I'm not entirely clear on what your needs are, does the content need to flow over to adjacent columns like the image, or do you have 4 column divs with static content?
Assuming the latter, you could make the column div's behave like table-cells: http://jsfiddle.net/wy4GR/
HTML Code:
<div id="main">
<div class="columns">
<div class="innerDiv">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="innerDiv">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>
</div>
<div class="columns">
<div class="innerDiv">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>
<div class="innerDiv">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</div>
<div class="columns">
<div class="innerDiv">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="innerDiv">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>
</div>
<div class="columns">
<div class="innerDiv">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>
<div class="innerDiv">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</div>
</div>
CSS Code:
#main {
width: 100%;
height: auto;
}
.columns {
width: 21%;
height: auto;
float:left;
margin: 1%;
}
.innerDiv {
width: auto;
background-color: #ccc;
flot: left;
margin:10px 0 0 0;
}
Working Demo: http://jsfiddle.net/GVLNW/1/
I think you may have idea from this:
.body {
width: 100%;
height: auto;
}
.mainColumn {
width: 840px;
height: auto;
margin: 0px auto;
}
.mainColumn ul {
margin: 0px;
padding: 0px;
}
.mainColumn ul li {
list-style-type: none;
width: 200px;
padding: 0px 0px 0px 10px;
float: left;
}
.colone {
margin: 10px 0px 0px 0px;
background: #CCCCCC;
}
.clear {
clear: both;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="mainColumn">
<ul>
<li>
<div class="colone">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
</div>
<div class="colone">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s</p>
</div>
<div class="colone">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum has been the industry's standard dummy text ever since</p>
</div>
</li>
<li>
<div class="colone">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="colone">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s</p>
</div>
<div class="colone">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
</li>
<li>
<div class="colone">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s</p>
</div>
<div class="colone">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s</p>
</div>
<div class="colone">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum has been the industry's standard dummy text ever since typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum has been the industry's standard dummy text ever since</p>
</div>
</li>
<li>
<div class="colone">
<p>Lorem Ipsum is simply dummy </p>
</div>
<div class="colone">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy
text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<div class="colone">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum has been the industry's standard dummy text ever since Lorem Ipsum is simply
dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum has been the industry's standard dummy text ever sinceLorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum has been the industry's standard dummy text ever since</p>
</div>
</li>
</ul>
<div class="clear"></div>
</div>
</body>
</html>