Convert an HTML list of elements into columns - html

I have the following HTML code (a wrapper and a list of elements)
<div class="items">
<div class="item">
1. 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.</div>
<div class="item">
2. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="item">
3. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
<div class="item">
4. 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.</div>
<div class="item">
5. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
<div class="item">
6. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
</div>
and I'd like to get this using CSS:
The real challenge is that this has to be solved only using CSS since I'm using AMP and I don't have access to JS.
So far I am here:
.items {
margin: 0 -10px
}
.items:after {
display: table;
content: ''
}
.items .item {
width: calc(50% - 42px);
float: left;
padding: 10px;
margin: 0 10px 10px 10px;
border: 1px solid blue
}
<div class="items">
<div class="item">
1. 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.</div>
<div class="item">
2. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="item">
3. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
<div class="item">
4. 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.</div>
<div class="item">
5. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
<div class="item">
6. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
</div>

Try this:
.items {
margin: 0 -10px;
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
.items {
margin: 0 -10px;
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
.items:after {
display: table;
content: ''
}
.items .item {
width: calc(50% - 42px);
float: left;
padding: 10px;
margin: 0 10px 10px 10px;
border: 1px solid blue
}
<div class="items">
<div class="item">
1. 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.</div>
<div class="item">
2. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="item">
3. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
<div class="item">
4. 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.</div>
<div class="item">
5. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
<div class="item">
6. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
</div>

You could set it as a two column grid.
Obviously you'll want to set the gap and the padding to suit your usage.
.items {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3vw;
}
.item {
border: solid blue 1px;
display: inline-block;
height: fit-content;
padding: 1vw;
}
<div class="items">
<div class="item">
1. 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.</div>
<div class="item">
2. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="item">
3. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
<div class="item">
4. 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.</div>
<div class="item">
5. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
<div class="item">
6. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
</div>

Related

bootstrap col-xl-6 not working properly that is remaining portion don't print anything

when use the code col-xl-6 the remaining portion stays blank and next content displays in the next raw. what is the problem?
<div class="raw">
<div class="col-12 col-lg-6">
<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 gal</p>
</div>
<div class="col-12 col-lg-6">
<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 gal</p>
</div>
</div>
row is the proper class not raw.
<div class="row">
<div class="col-12 col-lg-6">
<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 gal</p>
</div>
<div class="col-12 col-lg-6">
<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 gal</p>
</div>
</div>

Drop Cap a first letter using html tag

Can anyone help me to identify an HTML tag that I can use for writing the first letter of a word in "Drop Cap" form as we do it in MS word?
You can try this.
div.first {
line-height: 1.4em;
}
div.first:first-letter {
font-size: 2.8em;
float: left;
margin-top: 0.25em;
}
<div class="first"><span class="second">Ž</span>ed 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.</div>
<div class="first"><span class="second">Z</span>as 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.</div>
The following CSS style definition will cause the first letter of all <p> tags to be rendered using a larger font and a red color:
p::first-letter{
color: red;
font-size: 3.5em;
}

How can i add shape background like on image using css? [duplicate]

This question already has an answer here:
How to create uneven rounded sides on a div?
(1 answer)
Closed 3 years ago.
I tried like this but it's not right solution. Any solutions for this issue please.
.shape {
width: 200px;
height: 100px;
position:absolute;
top: 0;
right: 0;
background: red;
-moz-border-radius: 0px 0px 20px 110px;
-webkit-border-radius: 0px 0px 20px 110px;
border-radius: 0px 0px 20px 110px;
}
<div class="shape"></div>
I have added a :pseudo element and postioned it
.bg-shape {
position: relative;
overflow: hidden;
padding: 50px;
}
.bg-shape:after {
content: '';
position: absolute;
width: 600px;
height: 600px;
background: red;
border-radius: 50%;
top: 0;
right: 0;
z-index: -1;
top: -60%; /* change value as required */
right: -20%; /* change value as required */
}
<div class="bg-shape">
<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
</p>
<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
</p>
<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
</p>
<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
</p>
<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
</p>
<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
</p>
</div>

I want full div without container-fluid but not change container width and structure? [duplicate]

This question already has answers here:
How can I make a div take the full width of the page when it is inside another div that have 90% width
(3 answers)
How can I expand a child div to 100% screen width if the container div is smaller?
(7 answers)
Make child div stretch across width of page
(13 answers)
Closed 3 years ago.
I want full div without container-fluid but not change container width i want container width fix because my another div want in container so. Also structure will not change i want this structure.
.main {
padding: 100px 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="main">
<div class="container">
<div class="row"></div>
<div class="col-12">
<div class="half">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</div>
<div class="full">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</div>
</div>
</div>
</section>
Thanks in advance
Try this it will be worked fine for you, i have added some CSS
.main {
padding: 100px 0;
}
.full{
background:red;
width: 100vw;
position: relative;
margin-left: -50vw;
left: 50%;
padding:0 25px
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="main">
<div class="container">
<div class="row"></div>
<div class="col-12">
<div class="half">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</div>
<div class="full">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</div>
</div>
</div>
</section>

Marquee not working right in firefox

I am using a marquee, it's going fine in chrome, but in firefox it shows only the first div again and again. Here's the code :
<marquee direction="up" scrollamount="3">
<div class="eachnews">
<a href="#"> <div class="news-date"><span class="day_news">15</span><span class="month_news">Apr</span>
</div>
<div class="news-descript"><h2>News Title</h2>
<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.
</p>
</div></a>
</div>
<div class="eachnews">
<a href="#"> <div class="news-date"><span class="day_news">16</span><span class="month_news">Jan</span>
</div>
<div class="news-descript"><h2>News Title</h2>
<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.
</p>
</div></a>
</div>
<div class="eachnews">
<a href="#"> <div class="news-date"><span class="day_news">17</span><span class="month_news">Oct</span>
</div>
<div class="news-descript"><h2>News Title</h2>
<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.
</p>
</div></a>
</div>
<div class="eachnews">
<a href="#"> <div class="news-date"><span class="day_news">18</span><span class="month_news">Mar</span>
</div>
<div class="news-descript"><h2>News Title</h2>
<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.
</p>
</div></a>
</div>
</marquee>
the div where it is written "15 apr" is just repeating itself in ff, in chrome all divs are cycling fine. pls help
Marquee and Blink are not standard, and are no longer supported in many newer browsers, including versions of FF and IE. Sorry.
https://en.wikipedia.org/wiki/Marquee_element
However you can simulate them/reimplement them using javascript, if you really must.
http://themarqueeblink.com/
You should not use the marquee tag as it is not part of the standard and you can't assure support by the browsers (theoretically the vendors could drop the support anytime). Instead try a simple scripted solution like stated in this answer or by using this supersmall script I wrote:
http://jsfiddle.net/4kN5q/1/
It runs smoother in all browser that I tested (Ch,FF,IE) than the "native" marquee.