I am styling a list outputted by a CMS. I can only insert classes on the outer div. Structure of HTML if fixed.
I used before/after trick in order to give a font-awesome icon as a bullet point but when the viewport is constrained and the point overflows to the second line it can look bad, especially when just one or two words overflow.
Is there any way I can maintain the indent for the overflow text?
Here is my markup:
.green-tick-list li:before {
font-family: 'FontAwesome';
content:"\f00c";
margin:0 5px 0 -15px;
color: #33cc33;
}
.green-tick-list li{
list-style: none;
font-size: 1em;
line-height: 1.6em;
}
#responsive{
width: 300px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="fl-module fl-module-rich-text fl-animation fl-slide-right green-tick-list fl-node-56ec97eb4d7e1 fl-animated" data-node="56ec97eb4d7e1" data-animation-delay="0.5">
<div class="fl-module-content fl-node-content">
<div class="fl-rich-text">
<ul>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
<li>Lorem Ipsum is simply.</li>
<li>Lorem Ipsum is simply dummy text of the printing.</li>
<li>Lorem Ipsum.</li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
</ul>
</div>
</div>
</div>
<h3>Simulating restricted viewport</h3>
<div id="responsive">
<div class="fl-module fl-module-rich-text fl-animation fl-slide-right green-tick-list fl-node-56ec97eb4d7e1 fl-animated" data-node="56ec97eb4d7e1" data-animation-delay="0.5">
<div class="fl-module-content fl-node-content">
<div class="fl-rich-text">
<ul>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
<li>Lorem Ipsum is simply.</li>
<li>Lorem Ipsum is simply dummy text of the printing.</li>
<li>Lorem Ipsum.</li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
</ul>
</div>
</div>
</div>
</div>
I'd like the indent of the overflow text to be in line with the start start of the text. Is that possible?
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 having a problem creating a flexbox responsive grid and was hoping that someone can point me to the right direction.
I want all the .block div's to be equal height, and the .bottom div absolutely positioned to the bottom. This is actually working in the current solution, but when the h2 heading is too long and reaches 2 lines, I want all the h2 headings of the row to be the same height.
Is this possible in some way?
I made a Codepen to illustrate the problem:
http://codepen.io/kenvdbroek/pen/eZKdEQ
h1,
h2,
h3 {
margin: 0;
}
body {
margin: 0;
padding: 0;
}
ul.clean-list {
margin: 0;
padding: 0;
}
ul.clean-list li {
list-style: none;
margin-bottom: 5px;
}
li:last-child {
margin-bottom: 0;
}
.container {
padding-top: 50px;
}
.block {
margin-bottom: 30px;
border: 1px solid red;
}
.block > .bottom {
border: 1px solid blue;
}
#media only screen and (min-width: 480px) {
.row.row-flex-wrapper::before,
.row.row-flex-wrapper::after {
content: none !important;
}
.row.row-flex-wrapper::after {
clear: none;
}
.row.row-flex-wrapper {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
}
.row.row-flex-wrapper .column {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
float: none;
border: 1px solid orange;
}
.row.row-flex-wrapper .column > .block {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
-ms-flex-direction: column;
-webkit-flex-direction: column;
}
.row.row-flex-wrapper .column > .block > .block-list {
flex: 1 0 auto;
-ms-flex: 1 0 auto;
-webkit-flex: 1 0 auto;
}
.row.row-flex-wrapper .column > .block > h2 {}
}
#media only screen and (min-width: 480px) and (max-width: 767px) {
.container .row .column {
width: 50%;
}
}
<div class="container">
<div class="row row-flex-wrapper">
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title 1</h2>
<div class="block-list">
<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="bottom">
<ul class="clean-list">
<li>Some link
</li>
<li>Some link 2
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Another very long title which is actually toooo long...</h2>
<div class="block-list">
<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...</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Another button
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title</h2>
<div class="block-list">
<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, Lorem Ipsum has been the industry's standard dummy text...</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Very nice link
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>This block is cool!</h2>
<div class="block-list">
<p>Some text here. 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, Lorem Ipsum has been the industry's standard dummy
text...</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Another link
</li>
<li>Check this item
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title Block</h2>
<div class="block-list">
<p>Go check out this item... 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, Lorem Ipsum has been the industry's standard
dummy text...</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Button
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Buttonssssss</h2>
<div class="block-list">
<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="bottom">
<ul class="clean-list">
<li>Button
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Link to item
</li>
<li>Link to item
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title</h2>
<div class="block-list">
<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="bottom">
<ul class="clean-list">
<li>Link to item
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Another very very very very very very very long title</h2>
<div class="block-list">
<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="bottom">
<ul class="clean-list">
<li>Button to item
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
This is not possible with flexbox or CSS, in general.
An initial setting of a flex container is align-items: stretch. This causes flex items to expand the full length of the cross axis. This is what is known as "flex equal height columns".
Here are a few notes to keep in mind:
Equal height columns apply only to the children of a flex container. In other words, the flex items must have the same parent. Otherwise, the equal height feature doesn't apply.
Your question:
I want all the h2 headings of the row to be the same height. Is this possible in some way?
Not with CSS. Because the h2's exist in different containers, they aren't siblings (they're more like cousins), so equal heights don't apply.
Equal height columns in flexbox apply only to one flex line. Items on other lines, created by wrapping, establish their own equal height line. This means that equal height columns do not work in a multi-line flex container.
The align-self property can be used on individual flex items to override align-items, which can break the equal height feature.
By specifying a height on a flex item (e.g. height: 300px), both align-items and align-self are overridden for that item, and the equal height setting is ignored.
This post focuses on a container with flex-direction: row. If the container is flex-direction: column, then equal height becomes equal width. Here's a detailed review: Make flex items take content width, not width of parent container
More details:
Equal height rows in a flex container
How to disable equal height columns in Flexbox?
Duplicate posts:
How to get header from cards or similar to have the same height with flex box?
CSS - How to have children in different parents the same height?
Positioning nested grid items in a higher level container (a subgrid function)
Align child elements of different blocks
CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
Aligning the child elements of different parent containers
Use flexbox display to align items within a row wrapper
I worked out a jQuery solution based on your example.
Add the class "eh" (equal heights) to each parent element for which you want to align some of the (sub) children, and a data-eh element containing the selectors for the child elements.
<div class="row eh" data-eh='["h2",".block-list",".bottom"]'>
and then use this function:
$('.eh').each(function(){
var $this = $(this);
var equalHeightSelectors = $this.data('eh');
$.each(equalHeightSelectors, function( index, value ) {
var min_height = 0;
var $children = $this.find(value);
$children.each(function(){
var $el = $(this);
if($el.height() > min_height){
min_height = $el.height();
}
});
$children.height(min_height);
});
});
https://codepen.io/pwkip/pen/oNvxNYZ
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;
}
}
https://codepen.io/daniel-brown/pen/QWjXpXw
I need this li, to have their own height and not someone else’s
Expected outcome
div {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
<div>
<li>industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown </li>
<li>Lorem ever since the 1500s, when an unknown </li>
<li>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 </li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </li>
<li> unknown </li>
<li>Lorem Ipsum is simply dummy text of thver since the 1500s, when an unknown </li>
<li>L printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown </li>
<li>Lorem Ipsum is simply dummy text of the printing and typesettinry's standard dummy text ever since the 1500s, when an unknown </li>
<li>Lorem Ipsum is simply dummy text of Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown </li>
<li> when an unknown </li>
<li>Lorem </li>
</ul>
</div>
I can't change it, I have this ul li structure and I have to sort it through the grid
text
text
text
text
text
text
To do that use the css inline property to add height to the li element individually
<li style="height:10px;"> text </li>
But i would rather suggest using the bootstrap grid system, and then assign the height parameter using inline styling :
<div class="container">
<div class="row">
<div class="col-sm">
<ul>
<li style="height:10px;"> text </li>
<li> text </li>
</ul>
</div>
<div class="col-sm">
<ul>
<li> text </li>
<li> text </li>
</ul>
</div>
<div class="col-sm">
<ul>
<li> text </li>
<li> text </li>
</ul>
</div>
I am doing css/html for a school assignment, but I got stuck. I am trying to build a newsoverview but I don't know how to build this in the good/qualitative way.
Problems:
Is this a good way to put 'Laatste nieuws' in that position?
I want to get rid of the div's because I think it will be better to
use ul/li, but I don't know how I can use it in this case.
Positioning title and description of each article like the 1st
picture.
I need:
http://i.imgur.com/vz51zyA.png
I have:
http://i.imgur.com/4wTmtXu.png
<div id="newsListContainer">
<div id="newsListHeader"><h1>Laatste nieuws</h1></div>
<div class="newsListItem">
<img src="img/item3.jpg" width="100" height="75">
<h2> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
CSS:
#newsListContainer {
float:left;
width:100%;
background: url("img/body_bg.png") repeat-y;
}
#newsListHeader{
float:left;
width:690px;
height:40px;
margin-top:10px;
margin-bottom:10px;
border-bottom:1px solid #d6d6d6;
margin-left:133px;
}
.newsListItem {
margin-left:150px;
}
.newsListItem img{
float:left;
}
HTML UPDATED:
<div id="newsListContainer">
<div id="newsListHeader"><h1>Laatste nieuws</h1></div>
<ul><li class="newsListItem">
<img src="img/item3.jpg">
<h2> Lorem Ipsum is simply dummy text of </h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</li></ul>
<ul><li class="newsListItem">
<img src="img/item3.jpg">
<h2> Lorem Ipsum is simply dummy text of </h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</li></ul>
</div>
CSS UPDATED:
#newsListContainer {
float:left;
width:100%;
background: url("img/body_bg.png") repeat-y;
}
#newsListHeader{
float:left;
width:690px;
height:40px;
margin-top:10px;
margin-bottom:10px;
border-bottom:1px solid #d6d6d6;
margin-left:133px;
}
.newsListItem {
/*margin-left:150px;*/
padding-left: 115px;
}
.newsListItem img{
float:left;
width: 100px;
margin-left: -115px; /* SAME AS PADDING ABOVE */
In answer to your questions, and trying not to do your assignment for you:
Yes, the header is outside the 'list' of items which is good. Do you need the <div id="newsListHeader"> container though?
A list would be better, try it and see how you get on (<ul><li class="newsListItem">News item here</li></ul>).
This can be tricky at first and there's many ways of doing it (css html news list creation little help please). My preferred technique if I know the width of the image, is to add a padding to the .newsItemContainer and then negatively margin back the image by the same width. That means that the text will always line up along that padding line.
Code snippet:
.newsListItem {
padding-left: 115px;
}
.newsListItem img {
float: left;
width: 100px;
/* Added */
margin-left: -115px;
/* SAME AS PADDING ABOVE */
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="newsListItem">
<img src="http://placehold.it/100x75" width="100" height="75">
<h2> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="newsListItem">
<img src="http://placehold.it/100x75" width="100" height="75">
<h2> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</body>
</html>
.newsListItem img{
float:left;
margin-right:16px;
}