I'm trying to create a 2 column layout around an image but no success
This is what I want the layout to be:
This is what I can do so far:
<!DOCTYPE html>
<html>
<head>
<title>
Wrapping an Image with the text
</title>
<style>
img {
float: right;
margin: 5px;
}
p {
font-size: 20px;
}
</style>
</head>
<body>
<h1>Testing</h1>
<div class="square">
<div>
<img style="width: 300px" src="https://picture-origin.rumah123.com/news-content/img/2020/11/01111044/mansion-mewah-5.jpg" alt="">
</div>
<!-- <div style="column-count: 2"> -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim. Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus. Donec auctor justo eu lobortis finibus.
Proin ultrices bibendum odio, eu sodales metus ultricies a. Nullam a ex neque. Quisque vel justo sed quam rhoncus eleifend a eget lorem. Duis accumsan nibh ullamcorper dolor porttitor suscipit. Sed in orci augue. Proin hendrerit magna sit amet felis efficitur, in consectetur leo luctus. Nulla imperdiet arcu quis neque maximus, vel molestie est rutrum.
</p>
<!--</div>-->
</div>
</body>
</html>
if I activated the div with column style 2, the layout will be a mess like this:
What is the solution for this? It's been days and I haven't found any solution yet. Please help.
UPDATE
Sorry, forgot to mention that the sentences must be continuous, so when a sentence is not completed in left column, it will be continued to right column under the image.
Make the text into two paragraphs, place the image in the second one, and float it to the top.
<!DOCTYPE html>
<html>
<head>
<title>
Wrapping an Image with the text
</title>
<style>
img {
float: right top;
margin: 5px;
}
p {
font-size: 20px;
}
</style>
</head>
<body>
<h1>Testing</h1>
<div class="square">
<div style="column-count: 2">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim. Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus. Donec auctor justo eu lobortis finibus.</p>
<p> <img style="width: 300px" src="https://picture-origin.rumah123.com/news-content/img/2020/11/01111044/mansion-mewah-5.jpg" alt="">
Proin ultrices bibendum odio, eu sodales metus ultricies a. Nullam a ex neque. Quisque vel justo sed quam rhoncus eleifend a eget lorem. Duis accumsan nibh ullamcorper dolor porttitor suscipit. Sed in orci augue. Proin hendrerit magna sit amet felis efficitur, in consectetur leo luctus. Nulla imperdiet arcu quis neque maximus, vel molestie est rutrum.
</p>
</div>
</div>
</body>
</html>
Try wraping it using table like this
img {
float: right;
margin: 5px;
}
p {
font-size: 20px;
}
<table>
<tr>
<td width="70%">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta
tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus
dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim.
Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet
pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus.
Donec auctor justo eu lobortis finibus.
Proin ultrices bibendum odio, eu sodales metus ultricies a. Nullam a ex neque. Quisque vel justo sed
quam rhoncus eleifend a eget lorem. Duis accumsan nibh ullamcorper dolor porttitor suscipit. Sed in
orci augue. Proin hendrerit magna sit amet felis efficitur, in consectetur leo luctus. Nulla
imperdiet arcu quis neque maximus, vel molestie est rutrum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta
tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus
dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim.
Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet
pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus.
Donec auctor justo eu lobortis finibus.
Proin ultrices bibendum odio, eu sodales metus ultricies a. Nullam a ex neque. Quisque vel justo sed
quam rhoncus eleifend a eget lorem. Duis accumsan nibh ullamcorper dolor porttitor suscipit. Sed in
orci augue. Proin hendrerit magna sit amet felis efficitur, in consectetur leo luctus. Nulla
imperdiet arcu quis neque maximus, vel molestie est rutrum.
</p>
</td>
<td width="40%">
<img style width="100%"
src="https://picture-origin.rumah123.com/news-content/img/2020/11/01111044/mansion-mewah-5.jpg"
alt="">
</td>
</tr>
<tr>
<td width="60%">
</td>
<td width="20%">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias amet adipisci, possimus illo animi
maiores vitae corrupti. Similique suscipit, unde cupiditate sequi, sed rerum non officiis nisi nesciunt
quo vero ab reprehenderit quae ad aut saepe voluptate? Aliquam sint similique quibusdam iure
perspiciatis at quidem facere autem, iste velit in omnis! Atque repudiandae cupiditate ab nemo suscipit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta
tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus
dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim.
Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet
pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus.
Donec auctor justo eu lobortis finibus.
Proin ultrices bibendum odio, eu sodales metus ultricies a. Nullam a ex neque. Quisque vel justo sed
quam rhoncus eleifend a eget lorem. Duis accumsan nibh ullamcorper dolor porttitor suscipit. Sed in
orci augue. Proin hendrerit magna sit amet felis efficitur, in consectetur leo luctus. Nulla
imperdiet arcu quis neque maximus, vel molestie est rutrum.
</td>
</tr>
</table>
div {
margin: 2px;
}
#app {
display: flex;
}
.vd-grid-left-col {
display: flex;
flex-wrap: wrap;
flex-basis: 70%;
justify-content: space-between;
}
.main {
width: 100%;
background-color: blue;
}
.vd-grid-right-col {
display: flex;
flex-direction: column;
flex-basis: 30%;
}
.feature {
width: 100%;
background-color: grey;
}
img {
width: 100%;
margin: 5px;
}
p {
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>
Wrapping an Image with the text
</title>
</head>
<body>
<h1>Testing</h1>
<div id="app">
<div class="vd-grid-left-col">
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta
tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus
dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim.
Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet
pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus.
Donec auctor justo eu lobortis finibus. Proin ultrices bibendum odio, eu sodales metus ultricies a.
Nullam a ex neque. Quisque vel justo sed quam rhoncus eleifend a eget lorem. Duis accumsan nibh
ullamcorper dolor porttitor suscipit. Sed in orci augue. Proin hendrerit magna sit amet felis
efficitur,
in consectetur leo luctus. Nulla imperdiet arcu quis neque maximus, vel molestie est rutrum.</p>
</div>
</div>
<div class="vd-grid-right-col">
<div class="feature">
<img src="https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg"
alt="nature" width="500" height="300">
</div>
<div class="feature">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta
tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus
dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim.
Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet
pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus.
</p>
</div>
</div>
</div>
</body>
Weil, I finally managed to solve it. Here's my solution:
<!DOCTYPE html>
<html>
<head>
<title>
Wrapping an Image with the text
</title>
<style>
div {
column-count: 2;
position: relative;
padding-top: 33%;
font-size: 20px;
column-gap: 5%;
}
div img {
position: absolute;
top: 0;
right: 0;
width: 47.5%;
}
.first-el {
margin-top: -70%;
}
</style>
</head>
<body>
<h1>Testing</h1>
<div>
<img src="https://picture-origin.rumah123.com/news-content/img/2020/11/01111044/mansion-mewah-5.jpg">
<p class="first-el">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?orem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
</div>
</body>
</html>
The image is positioned absolute on top right. It will be placed over the text so I used padding-top in the container and negative margin top in first element of the container which is first-el class to make a space for the image. Both padding-top and margin-top are in percentage to make the room responsive to image's height.
I hope this can help someone who have similar issue.
Related
The snippet shows 2 examples. First is the layout for small breakpoints, where it has 4 elements in one column. The second one is the layout for big breakpoints, where it has 2 elements in one column and 2 elements in another column. And the element that has moved over from the second column is one from the middle ("second paragraph", not the first or third paragraph).
I can do it like the snippet with 2 different markups for the different breakpoints, but duplicating markup is not good. How can I do it using 1 markup and have it adjust to both layouts at the different breakpoints? I tried using grid layout but it didn't work because the top left image in the large breakpoint had extra space on the bottom because of the paragraph on the top right (they are taking up the same height because they are in the same grid row).
h2 {
margin: 0;
}
.container1 {
width: 100%
}
.container1 .column1 img {
width: 100%
}
.container2 {
display: flex;
flex-direction: col;
flex-wrap: wrap;
}
.container2 .column1 {
width: 50%;
}
.container2 .column1 img {
width: 100%
}
.container2 .column2 {
width: 50%;
}
<h1>first example</h1>
<div class="container1">
<div class="column1">
<img src="https://picsum.photos/250/100">
</div>
<div class="column2">
<h2>first paragraph</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis a condimentum. Id porta nibh venenatis cras sed felis eget velit. Lacus sed turpis tincidunt
id aliquet risus feugiat in ante. Pretium vulputate sapien nec sagittis aliquam. Tortor vitae purus faucibus ornare. Sed turpis tincidunt id aliquet risus. Adipiscing vitae proin sagittis nisl rhoncus mattis. Eu turpis egestas pretium aenean. Viverra
justo nec ultrices dui. Mattis rhoncus urna neque viverra justo. Facilisi cras fermentum odio eu feugiat pretium nibh. In mollis nunc sed id semper. Eget mi proin sed libero enim sed faucibus turpis. Fringilla ut morbi tincidunt augue interdum velit
euismod in. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Sed elementum tempus egestas sed sed risus.
</div>
</div>
<div>
<h2>second paragraph</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis a condimentum. Id porta nibh venenatis cras sed felis eget velit. Lacus sed turpis tincidunt
id aliquet risus feugiat in ante. Pretium vulputate sapien nec sagittis aliquam. Tortor vitae purus faucibus ornare. Sed turpis tincidunt id aliquet risus. Adipiscing vitae proin sagittis nisl rhoncus mattis. Eu turpis egestas pretium aenean. Viverra
justo nec ultrices dui. Mattis rhoncus urna neque viverra justo. Facilisi cras fermentum odio eu feugiat pretium nibh. In mollis nunc sed id semper. Eget mi proin sed libero enim sed faucibus turpis. Fringilla ut morbi tincidunt augue interdum velit
euismod in. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Sed elementum tempus egestas sed sed risus.
</div>
</div>
<div>
<h2>third paragraph</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis a condimentum. Id porta nibh venenatis cras sed felis eget velit. Lacus sed turpis tincidunt
id aliquet risus feugiat in ante. Pretium vulputate sapien nec sagittis aliquam. Tortor vitae purus faucibus ornare. Sed turpis tincidunt id aliquet risus. Adipiscing vitae proin sagittis nisl rhoncus mattis. Eu turpis egestas pretium aenean. Viverra
justo nec ultrices dui. Mattis rhoncus urna neque viverra justo. Facilisi cras fermentum odio eu feugiat pretium nibh. In mollis nunc sed id semper. Eget mi proin sed libero enim sed faucibus turpis. Fringilla ut morbi tincidunt augue interdum velit
euismod in. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Sed elementum tempus egestas sed sed risus.
</div>
</div>
</div>
<h1>second example</h1>
<div class="container2">
<div class="column1">
<img src="https://picsum.photos/250/100">
<div>
<h2>second paragraph</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis a condimentum. Id porta nibh venenatis cras sed felis eget velit. Lacus sed turpis tincidunt
id aliquet risus feugiat in ante. Pretium vulputate sapien nec sagittis aliquam. Tortor vitae purus faucibus ornare. Sed turpis tincidunt id aliquet risus. Adipiscing vitae proin sagittis nisl rhoncus mattis. Eu turpis egestas pretium aenean.
Viverra justo nec ultrices dui. Mattis rhoncus urna neque viverra justo. Facilisi cras fermentum odio eu feugiat pretium nibh. In mollis nunc sed id semper. Eget mi proin sed libero enim sed faucibus turpis. Fringilla ut morbi tincidunt augue
interdum velit euismod in. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Sed elementum tempus egestas sed sed risus.
</div>
</div>
</div>
<div class="column2">
<div>
<h2>first paragraph</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis a condimentum. Id porta nibh venenatis cras sed felis eget velit. Lacus sed turpis tincidunt
id aliquet risus feugiat in ante. Pretium vulputate sapien nec sagittis aliquam. Tortor vitae purus faucibus ornare. Sed turpis tincidunt id aliquet risus. Adipiscing vitae proin sagittis nisl rhoncus mattis. Eu turpis egestas pretium aenean.
Viverra justo nec ultrices dui. Mattis rhoncus urna neque viverra justo. Facilisi cras fermentum odio eu feugiat pretium nibh. In mollis nunc sed id semper. Eget mi proin sed libero enim sed faucibus turpis. Fringilla ut morbi tincidunt augue
interdum velit euismod in. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Sed elementum tempus egestas sed sed risus.
</div>
</div>
<div>
<h2>third paragraph</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis a condimentum. Id porta nibh venenatis cras sed felis eget velit. Lacus sed turpis tincidunt
id aliquet risus feugiat in ante. Pretium vulputate sapien nec sagittis aliquam. Tortor vitae purus faucibus ornare. Sed turpis tincidunt id aliquet risus. Adipiscing vitae proin sagittis nisl rhoncus mattis. Eu turpis egestas pretium aenean.
Viverra justo nec ultrices dui. Mattis rhoncus urna neque viverra justo. Facilisi cras fermentum odio eu feugiat pretium nibh. In mollis nunc sed id semper. Eget mi proin sed libero enim sed faucibus turpis. Fringilla ut morbi tincidunt augue
interdum velit euismod in. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Sed elementum tempus egestas sed sed risus.
</div>
</div>
</div>
For the desktop version of it you could use grid-row to expend your rows and keep a clear markup
body {
margin: 0;
}
.img__content {
grid-row: 1 / 4;
position: relative;
height: 100%;
}
.img__content img {
position: absolute;
max-width: 100%;
height: 100%;
width: unset;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: auto;
}
.bloc:nth-child(4) {
grid-row: 3 / span 2;
}
.bloc {
grid-row: span 2;
}
<div class="grid">
<div class="img__content">
<img src="https://images.unsplash.com/photo-1619445189993-b96d083fc862?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMTI0MDIyMw&ixlib=rb-1.2.1&q=85" alt="">
</div>
<div class="bloc">
<h1>Paragraph 1</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut laudantium incidunt expedita maxime beatae earum, quaerat suscipit quos corrupti dolore rerum corporis? Illum quo, tenetur ea doloribus reprehenderit voluptas labore?</p>
</div>
<div class="bloc">
<h1>Paragraph 2</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut laudantium incidunt expedita maxime beatae earum, quaerat suscipit quos corrupti dolore rerum corporis? Illum quo, tenetur ea doloribus reprehenderit voluptas labore?</p>
</div>
<div class="bloc">
<h1>Paragraph 3</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut laudantium incidunt expedita maxime beatae earum, quaerat suscipit quos corrupti dolore rerum corporis? Illum quo, tenetur ea doloribus reprehenderit voluptas labore?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut laudantium incidunt expedita maxime beatae earum, quaerat suscipit quos corrupti dolore rerum corporis? Illum quo, tenetur ea doloribus reprehenderit voluptas labore?</p>
</div>
<div class="bloc">
<h1>Paragraph 4</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut laudantium incidunt expedita maxime beatae earum, quaerat suscipit quos corrupti dolore rerum corporis? Illum quo, tenetur ea doloribus reprehenderit voluptas labore?</p>
</div>
</div>
I have this text:
<div class"blur-gradient">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aenean et tortor at risus viverra adipiscing at in. Cursus vitae congue mauris rhoncus aenean vel. Tristique nulla aliquet enim tortor at auctor urna nunc id. Nisl tincidunt eget nullam non. Purus sit amet luctus venenatis lectus magna fringilla. Velit scelerisque in dictum non consectetur a erat nam. Vel pretium lectus quam id leo in. Tristique nulla aliquet enim tortor at auctor. In vitae turpis massa sed elementum. Erat imperdiet sed euismod nisi porta lorem mollis. Mattis enim ut tellus elementum sagittis. Convallis tellus id interdum velit laoreet id. Urna condimentum mattis pellentesque id nibh tortor id. Vitae congue mauris rhoncus aenean vel. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Nulla porttitor massa id neque aliquam vestibulum morbi. Condimentum mattis pellentesque id nibh tortor id.
</p>
<p>
Volutpat lacus laoreet non curabitur gravida arcu ac. Id aliquet lectus proin nibh nisl condimentum id. Sapien faucibus et molestie ac feugiat sed lectus. Facilisis magna etiam tempor orci eu lobortis elementum nibh. Dui vivamus arcu felis bibendum. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Odio pellentesque diam volutpat commodo sed egestas egestas. Adipiscing diam donec adipiscing tristique risus nec feugiat in. Risus nullam eget felis eget nunc lobortis. Accumsan sit amet nulla facilisi morbi. Elit eget gravida cum sociis natoque penatibus et magnis. Morbi tempus iaculis urna id volutpat lacus laoreet. In nibh mauris cursus mattis molestie a iaculis at erat. Fermentum dui faucibus in ornare quam. Duis at tellus at urna condimentum mattis pellentesque id. Est ullamcorper eget nulla facilisi. Sed arcu non odio euismod lacinia. Orci ac auctor augue mauris augue neque gravida in fermentum.
</p>
</div>
I want the text to start out with filter: blur(0px) and end up with filter: blur(4px).
Is this possible with css? If so, how do you recommend I go about it?
So we definitely can't apply double styles in one element in css.
Eg This is wrong approach in css.
p{
filter:blur(0px);
...
filter:blur(4px); // will set this style instead of 0px. ignoring above one.
font-size: 10px;
...
font-size: 13px; // will set font-size to 13px instead of 10px; ignoring above one.
}
The only way that you can approach is you should wrap your text in several parts
And then apply css to each p.
.blur-gradient p:nth-child(1){
filter: blur(1px);
}
.blur-gradient p:nth-child(2){
filter: blur(2px);
}
...
To make smoother you should divide text more and more. This is only one way. You could make javascript code but not recommended.
It can be done with modern WebKit approach, but you need to duplicate the text layer
<div style="
width: 400px;
position: relative;
">
<p style="
width: 100%;
position: absolute;
-webkit-mask-image: -webkit-gradient(linear, left 10%, left 70%, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p style="
-webkit-mask-image: -webkit-gradient(linear, left 10%, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
filter: blur(4px);
">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
</div>
One approach to achieve this effect is to divide the text into <span>s and apply an incrementally stronger filter: blur() to each <span>.
Working Example:
const blurGradient = document.getElementsByClassName('blur-gradient')[0];
// COUNT PARAGRAPHS
let blurGradientParagraphs = [...blurGradient.getElementsByTagName('p')];
// CALCULATE BLUR INCREMENT
let textLength = 0;
blurGradientParagraphs.forEach((blurGradientParagraph) => {
textLength += blurGradientParagraph.textContent.length
});
const blurIncrement = (4 / textLength);
// SPLIT EACH PARAGRAPH INTO SPANS
blurGradientParagraphs.forEach((blurGradientParagraph) => {
let blurGradientParagraphArray = blurGradientParagraph.textContent.split('');
blurGradientParagraph.innerHTML = '<span>' + blurGradientParagraphArray.join('</span><span>') + '</span>';
});
// APPLY INCREMENTAL BLUR TO EACH SPAN, IN ORDER
let spans = [... blurGradient.getElementsByTagName('span')];
for (let i = 0; i < spans.length; i++) {
spans[i].style.filter = 'blur(' + (blurIncrement * i) + 'px)';
}
<div class="blur-gradient">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aenean et tortor at risus viverra adipiscing at in. Cursus vitae congue mauris rhoncus aenean vel. Tristique nulla aliquet enim tortor at auctor urna nunc id. Nisl tincidunt eget nullam non. Purus sit amet luctus venenatis lectus magna fringilla. Velit scelerisque in dictum non consectetur a erat nam. Vel pretium lectus quam id leo in. Tristique nulla aliquet enim tortor at auctor. In vitae turpis massa sed elementum. Erat imperdiet sed euismod nisi porta lorem mollis. Mattis enim ut tellus elementum sagittis. Convallis tellus id interdum velit laoreet id. Urna condimentum mattis pellentesque id nibh tortor id. Vitae congue mauris rhoncus aenean vel. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Nulla porttitor massa id neque aliquam vestibulum morbi. Condimentum mattis pellentesque id nibh tortor id.
</p>
<p>
Volutpat lacus laoreet non curabitur gravida arcu ac. Id aliquet lectus proin nibh nisl condimentum id. Sapien faucibus et molestie ac feugiat sed lectus. Facilisis magna etiam tempor orci eu lobortis elementum nibh. Dui vivamus arcu felis bibendum. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Odio pellentesque diam volutpat commodo sed egestas egestas. Adipiscing diam donec adipiscing tristique risus nec feugiat in. Risus nullam eget felis eget nunc lobortis. Accumsan sit amet nulla facilisi morbi. Elit eget gravida cum sociis natoque penatibus et magnis. Morbi tempus iaculis urna id volutpat lacus laoreet. In nibh mauris cursus mattis molestie a iaculis at erat. Fermentum dui faucibus in ornare quam. Duis at tellus at urna condimentum mattis pellentesque id. Est ullamcorper eget nulla facilisi. Sed arcu non odio euismod lacinia. Orci ac auctor augue mauris augue neque gravida in fermentum.
</p>
</div>
You can use mask on any filter (filter and backdrop-filter). This will let you progressively blur content (text or not).
eg. https://codepen.io/QuiteQuinn/pen/jOBxGjr
In this specific case I would add an element on top of your content with the following css.
mask: linear-gradient(black, black, transparent);
backdrop-filter: blur(8px);
Support is there with the exception of Firefox for "backdrop-filter", as of June 5, 2021.
https://caniuse.com/css-backdrop-filter
I wanted to to know this also, but today was the day I would find out. After a lot of searching around the internet and learning some more css, I have found the best way to do this. We shouldn't achieve this with blur because blur is very difficult to control as a gradient.
p {
font-size: 12px;
color: black;
-webkit-mask-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras interdum purus sed felis accumsan, sit amet laoreet orci
sodales. Nunc pretium ante vitae orci ultricies, id luctus arcu
volutpat. Nulla ornare tellus et turpis pretium ullamcorper.
Maecenas eget nunc at erat imperdiet auctor. Nulla eros ante,
porta vitae semper rhoncus, dapibus non ligula. Proin cursus
convallis tortor, sed molestie erat. Nullam mauris urna, varius
et efficitur eu, porttitor et augue. Mauris condimentum egestas
condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras interdum purus sed felis accumsan, sit amet laoreet orci
sodales. Nunc pretium ante vitae orci ultricies, id luctus arcu
volutpat. Nulla ornare tellus et turpis pretium ullamcorper.
Maecenas eget nunc at erat imperdiet auctor. Nulla eros ante,
porta vitae semper rhoncus, dapibus non ligula. Proin cursus
convallis tortor, sed molestie erat. Nullam mauris urna, varius
et efficitur eu, porttitor et augue. Mauris condimentum egestas
condimentum.
</p>
I have seen this on lots of websites as a way for 'only premium members' to access the data. Now, I finally know how to do it! Obviously, this way can be adjusted to your needs, but this is the basic and general solution.
EDIT: I have found yet another way.
p {
font-size: 12px;
background: linear-gradient(to bottom, black, rgba(255, 255, 255, 0));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras interdum purus sed felis accumsan, sit amet laoreet orci
sodales. Nunc pretium ante vitae orci ultricies, id luctus arcu
volutpat. Nulla ornare tellus et turpis pretium ullamcorper.
Maecenas eget nunc at erat imperdiet auctor. Nulla eros ante,
porta vitae semper rhoncus, dapibus non ligula. Proin cursus
convallis tortor, sed molestie erat. Nullam mauris urna, varius
et efficitur eu, porttitor et augue. Mauris condimentum egestas
condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras interdum purus sed felis accumsan, sit amet laoreet orci
sodales. Nunc pretium ante vitae orci ultricies, id luctus arcu
volutpat. Nulla ornare tellus et turpis pretium ullamcorper.
Maecenas eget nunc at erat imperdiet auctor. Nulla eros ante,
porta vitae semper rhoncus, dapibus non ligula. Proin cursus
convallis tortor, sed molestie erat. Nullam mauris urna, varius
et efficitur eu, porttitor et augue. Mauris condimentum egestas
condimentum.
</p>
backdrop-filter combined with mask can approximate this. The only drawback is the low support
.box {
font-size:25px;
margin:0 10%;
position:relative;
}
.box::before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
backdrop-filter:blur(5px);
-webkit-mask:linear-gradient(transparent,#fff);
pointer-events:none;
}
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rhoncus lobortis justo sed interdum. Ut quis purus lacinia, gravida justo eu, auctor mauris. Phasellus imperdiet, elit in lobortis fermentum, lacus diam sollicitudin lectus, in suscipit eros dui vitae sem. Integer commodo et nibh ut vulputate. Duis vel mauris pharetra, venenatis libero eu, malesuada elit. In rhoncus mi tellus, a lacinia orci vehicula id. Aliquam ultricies dolor leo lectus, in suscipit eros dui vitae sem. Integer commodo et nibh ut vulputate. Duis vel mauris pharetra, venenatis libero eu, malesuada elit. In rhoncus mi tellus, a lacinia orci vehicula id. Aliquam ultricies dolor leo
</div>
This question intrigued me enough to try and work out a "decent" solution which I consider as such that would gradually blur only the last few lines, in a visual pleasing manner, without the hacks of duplicate-content such as the other answers here.
Mixing backdrop-filter with mask-image (with a gradient), this is achievable, but only for Chrome browser and FF when a flag (layout.css.backdrop-filter.enabled) is set to true in about:config.
See Codepen Demo
The below code is the compiled versions from the SCSS of my Codepen demo, which is using auto-prefixing. I advise playing with the parameters of the source code in Codepen due to the lack of Stackoverflow in supporting SCSS syntax...
html{
--blur: 6px;
}
p{
font: calc(.5vw + 11px) Arial;
width: 50%;
position: relative;
}
p::after {
content: '';
position: absolute;
top: 0;
bottom: calc(var(--blur) * -1);
right: calc(var(--blur) * -2);
left: calc(var(--blur) * -2);
-webkit-backdrop-filter: blur(var(--blur)) brightness(1.1);
backdrop-filter: blur(var(--blur)) brightness(1.1);
-webkit-mask-image: -webkit-gradient(linear, left bottom, left top,
color-stop(1em, red),
color-stop(2.5em, transparent)),
-webkit-gradient(linear, left bottom, left top,
color-stop(2.5em, rgba(0, 0, 0, 0.88)),
color-stop(5em, transparent));
-webkit-mask-image: linear-gradient(to top, red 1em, transparent 2.5em),
linear-gradient(to top, rgba(0, 0, 0, 0.88) 2.5em, transparent 5em);
}
/* Non-supported browsers fallback to a fade without blur: */
#supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
p::after {
background-color: white;
mask-image: linear-gradient(transparent 60%, white calc(100% - var(--blur)));
}
}
<p>
The <mark>backdrop-filter</mark> CSS property lets you apply graphical effects such as blurring or color shifting to
the area behind an element. Because it applies to everything behind the element, to see the effect
you must make the element or its background at least partially transparent.
<br><br>
The feature can be enabled in Firefox by setting the <em><code>layout.css.backdrop-filter.enabled</code></em> to true in <em><code>about:config</code></em> (soon-to-be rolled-out).
</br>
<br><br>
The <mark>mask-image</mark> property may reference a mask element. The content of the mask element serves as the mask.
Alternatively, for many simple uses, the <code>mask-image</code> property may refer directly to images to be used as mask,
forgoing the need for an explicit mask element. This mask can then be sized and positioned
just like CSS background images using the mask-position, mask-size and other characterizing properties.
</p>
In this demo I have tried to only blur the last few lines, and especially the very last ones, so it would be completely unreadable.
To make the fade more gradual, regardless of the lines, I would suggest this:
mask-image: linear-gradient(transparent 50%, red calc(90% - 1em - var(--blur)));
(the name of the color is irrelevant here, so i'm using the shortest name)
Generates two elements :before and :after. They get text from attribute data-text
The idea is for the two elements to have opposite transparency. As one, a blur value is set.
This solution not have a SEO problem for duplicate text in content!
Example:
.myText {
position: relative;
z-index: 0;
padding-bottom: 20px;
}
.myText:before {
content: attr(data-text);
position: relative;
background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
-webkit-mask-image: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
z-index: 1;
}
.myText:after {
content: attr(data-text);
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
-webkit-mask-image: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
-webkit-background-clip: text;
-webkit-filter: blur(4px);
z-index: -1;
}
.myText span {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
color: rgba(0,0,0,0);
z-index: 2;
}
<div class="myText" data-text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure qui, earum tenetur facilis quod vero, porro, sequi consequuntur inventore id atque modi fugiat soluta iste? Eveniet omnis animi mollitia doloribus? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio tenetur et vero placeat eaque harum minus velit, ratione iste
architecto rem dolores cumque officiis perferendis saepe vitae provident mollitia sed! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis libero, dolor officiis vero aspernatur itaque? In obcaecati nobis reprehenderit dolorem autem deserunt. Ratione, reiciendis adipisci. Sed consectetur ipsa tempora! Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure qui, earum tenetur facilis quod vero, porro, sequi consequuntur inventore id atque modi fugiat soluta iste? Eveniet omnis animi mollitia doloribus? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio tenetur et vero placeat eaque harum minus velit, ratione iste architecto rem dolores cumque officiis perferendis saepe vitae provident mollitia sed! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis libero, dolor officiis vero aspernatur itaque? In obcaecati nobis reprehenderit dolorem autem deserunt. Ratione, reiciendis adipisci. Sed consectetur ipsa tempora!">
<span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure qui, earum tenetur facilis quod vero, porro, sequi consequuntur inventore id atque modi fugiat soluta iste? Eveniet omnis animi mollitia doloribus? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio tenetur et vero placeat eaque harum minus velit, ratione iste architecto rem dolores cumque officiis perferendis saepe vitae provident mollitia sed! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis libero, dolor officiis vero aspernatur itaque? In obcaecati nobis reprehenderit dolorem autem deserunt. Ratione, reiciendis adipisci. Sed consectetur ipsa tempora! Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure qui, earum tenetur facilis quod vero, porro, sequi consequuntur inventore id atque modi fugiat soluta iste? Eveniet omnis animi mollitia doloribus? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio tenetur et vero placeat eaque harum minus velit, ratione iste architecto rem dolores cumque officiis perferendis saepe vitae provident mollitia sed! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis libero, dolor officiis vero aspernatur itaque? In obcaecati nobis reprehenderit dolorem autem deserunt. Ratione, reiciendis adipisci. Sed consectetur ipsa tempora!
</span>
</div>
Please try to use with CSS animation:
<style>
div p {
animation-name: example;
animation-duration: 4s;
animation-fill-mode: forwards;
}
#keyframes example {
from { filter: blur(0px); }
to { filter: blur(4px); }
}
</style>
I displayed text in a two columns layout, with column-count and column-fill: auto so that it fills completely the first column before going to the second.
I also need to add an illustration at the top right (top of the second column). With a position: fixed, the text won't wrap around the image but will hide underneath it. I tried float combinations with no success.
How would you approach this ? Thanks !
<div class="main">
<div class="description">
<div>
longish text
</div>
<figure>
<img class="illustration"
src="data:image:{{ p.id }}">
</figure>
</div>
</div>
.main {
margin-top: 2cm;
padding: 0 1cm 0cm 1cm;
column-count: 2;
column-gap: 2em;
column-fill: auto;
text-align: justify;
}
.produit-title {
color: firebrick;
padding: 2cm 1cm 0cm 1cm;
}
img.illustration {
margin-top: 0.1cm;
margin-left: auto;
margin-right: auto;
display: block;
max-height: 5cm;
max-width: 11cm;
border: solid 0.04cm;
border-color: firebrick;
}
expected result:
(edit) the text can be of variable length, but I would like the layout to stay the same. A short text can stop at the first column (role of colum-fill: auto), but the image would still be on the right.
Not an easy task at all. You can sort of hack it though, if your images have a fixed height:
div {
max-width:420px;
column-count: 2;
column-gap: 20px;
position: relative;
padding-top: 150px;
}
div img {
position: absolute;
top: 0;
right: 0;
height: 150px;
width: 200px;
}
div p:first-of-type {
margin-top: -150px;
}
<div>
<img src="http://via.placeholder.com/200x150px">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?orem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
</div>
The trick is to absolute position the image in the container then pull the text back up by setting a positive padding on the container and negative margin on the first paragrash, both equal number to the image height.
This is one of those things that definitely should be easier.
Can't you structure the html like this? Making sure that the image is positioned relatively inside the div?
<div class="main">
<div class="description">
<div>
longish text
<img class="illustration" src="data:image:{{ p.id }}">
more text
</div>
</div>
</div>
EDIT: If this does not work for you then as I see it you need to either decide where your image is always going to be e.g. always open your article with image followed by text and then you can position as required, or adopt some widely unsupported solution such as regions (https://www.html5rocks.com/en/tutorials/regions/adobe/).
Came upon this stack when trying to find a better solution than the one I went with which was the following. Only advantage to the accepted answer is it doesn't require absolute positioning. Still need to know the height of the image.
Note: the image does have to come before the text.
.columns {
columns: 2;
}
.image {
background-color: green;
width: 100px;
height: 100px;
column-span: all;
margin-left: auto;
}
.text {
margin-top: -100px; /* height of image */
}
<div class="columns">
<div class="image"></div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam erat velit. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Magna eget est lorem ipsum dolor. Feugiat in ante metus dictum at. Platea dictumst quisque sagittis purus sit amet. Nam aliquam sem et tortor. Velit dignissim sodales ut eu sem integer vitae justo eget. Tempor id eu nisl nunc mi ipsum faucibus vitae aliquet. Dapibus ultrices in iaculis nunc. Condimentum id venenatis a condimentum vitae sapien pellentesque. Luctus accumsan tortor posuere ac ut consequat semper. Viverra orci sagittis eu volutpat odio facilisis mauris. Suspendisse sed nisi lacus sed viverra tellus in hac habitasse. Et netus et malesuada fames ac turpis egestas sed tempus. Sit amet tellus cras adipiscing enim eu turpis egestas. Pretium vulputate sapien nec sagittis aliquam malesuada.
Dis parturient montes nascetur ridiculus mus mauris vitae. Morbi tristique senectus et netus et malesuada fames. Augue lacus viverra vitae congue eu consequat. Lobortis elementum nibh tellus molestie nunc non blandit massa. Dictum at tempor commodo ullamcorper a lacus vestibulum. Risus ultricies tristique nulla aliquet. Nulla pharetra diam sit amet nisl. Sed nisi lacus sed viverra tellus in hac habitasse. Arcu risus quis varius quam quisque id diam vel. Condimentum mattis pellentesque id nibh tortor id. Placerat duis ultricies lacus sed turpis. Quis eleifend quam adipiscing vitae proin sagittis. Ut tristique et egestas quis ipsum suspendisse. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla. Viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat.
</div>
<div>
I have a question. Does something simillar to "float: center" exist?
I am trying to make 2 columns of text and I want to have an image between them on the bottom... But not like in my example. I would like to have it floated.
Thanks for answers.
.column{
display:inline-block;
width: 150px;
margin-right: 10px;
}
.photo{
width: 150px;
}
<p class="column">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Etiam commodo dui eget wisi. Donec vitae arcu. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam
</p>
<img src="http://www.matmasar.wz.cz/foto.jpg" class="photo">
<p class="column">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Etiam commodo dui eget wisi. Donec vitae arcu. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam
</p>
Putting your picture in a column and position it to the bottom by making the parent:
position: relative;
and the child
position: absolute;
bottom: 0;
See the snippet below for the result:
.column{
display:inline-block;
position: relative;
width: 150px;
margin-right: 10px;
}
.column img {
position: absolute;
bottom: 0;
width: 150px;
}
<p class="column">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Etiam commodo dui eget wisi. Donec vitae arcu. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam
</p>
<p class="column">
<img src="http://www.matmasar.wz.cz/foto.jpg">
</p>
<p class="column">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Etiam commodo dui eget wisi. Donec vitae arcu. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam
</p>
In answer to your question, there is no such thing as float:center;
In terms of your example, I think this is what you are trying to do:
.column{
float:left;
width: 150px;
margin-right: 10px;
}
.photo{
width: 150px;
}
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Etiam commodo dui eget wisi. Donec vitae arcu. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam</p>
</div>
<div class="column">
<img src="http://www.matmasar.wz.cz/foto.jpg" class="photo">
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Etiam commodo dui eget wisi. Donec vitae arcu. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam</p>
</div>
In the snippet, I removed the class of column from your <p> tags, and instead put each column inside it's own <div>. This causes the image to act as it's own column.
I also removed the display:inline-block and added float:left to the column class to ensure that columns appear alongside eachother.
I am using CSS to convert HTML to PDF. I add page numbers to the bottom of the page and a name of the chapter to the top of the page (with #top-center, see the CSS and HTML code bellow). This works fine. Then I render PDF with Prince.
I need to avoid printing the page header on the first page (because the heading is already there) and leave the page header only on the second and other pages.
Can you please advise, how to remove the header on the first page of the chapter and leave it on others?
#page {
margin: 27mm 16mm 27mm 16mm;
size: 7in 9.25in;
}
div.chapter {
page: chapter;
}
h1 {
string-set: chapter content();
}
#page chapter:left {
#top-center {
font: 11pt "Bookerly", serif;
content: string(chapter, first);
vertical-align: bottom;
padding-bottom: 2em;
font-variant: small-caps;
color: #888888;
}
#bottom-center {
font: 11pt "Bookerly", serif;
content: counter(page);
padding-top: 2em;
vertical-align: top;
}
}
#page chapter:right {
#top-center {
font: 11pt "Bookerly", serif;
content: string(chapter, first);
vertical-align: bottom;
padding-bottom: 2em;
font-variant: small-caps;
color: #888888;
}
#bottom-center {
font: 11pt "Bookerly", serif;
content: counter(page);
vertical-align: top;
padding-top: 2em;
}
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Book</title>
</head>
<body lang="CS" vlink="purple" link="blue" class="calibre">
<div class="chapter">
<h1 id="c1">Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla est. Duis pulvinar. Aliquam ornare wisi eu metus. Mauris dictum facilisis augue. Nunc auctor. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Fusce wisi. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Duis condimentum augue id magna semper rutrum. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. In enim a arcu imperdiet malesuada. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat.</p>
<p>Integer vulputate sem a nibh rutrum consequat. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Vivamus ac leo pretium faucibus. Donec quis nibh at felis congue commodo. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Curabitur bibendum justo non orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. In convallis. Curabitur vitae diam non enim vestibulum interdum. In rutrum. Nulla non arcu lacinia neque faucibus fringilla. Vivamus ac leo pretium faucibus. Sed convallis magna eu sem. Nullam rhoncus aliquam metus. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Proin in tellus sit amet nibh dignissim sagittis.</p>
<p>Maecenas aliquet accumsan leo. Duis condimentum augue id magna semper rutrum. Pellentesque pretium lectus id turpis. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Etiam bibendum elit eget erat. Integer imperdiet lectus quis justo. Etiam commodo dui eget wisi. Sed ac dolor sit amet purus malesuada congue. Duis viverra diam non justo. Etiam bibendum elit eget erat. Fusce consectetuer risus a nunc. Suspendisse sagittis ultrices augue. In convallis. Etiam commodo dui eget wisi. Mauris metus. Aliquam ante. Nulla non arcu lacinia neque faucibus fringilla.</p>
<p>In rutrum. Praesent in mauris eu tortor porttitor accumsan. Mauris elementum mauris vitae tortor. Morbi scelerisque luctus velit. Integer malesuada. Nullam sit amet magna in magna gravida vehicula. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Duis risus. Nam quis nulla. Aliquam erat volutpat. In enim a arcu imperdiet malesuada. Aenean vel massa quis mauris vehicula lacinia. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Mauris tincidunt sem sed arcu.</p>
<p>Nulla quis diam. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Maecenas lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec iaculis gravida nulla. Aenean fermentum risus id tortor. Cras elementum. Etiam bibendum elit eget erat. Suspendisse nisl. Praesent vitae arcu tempor neque lacinia pretium. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Etiam egestas wisi a erat. Aenean id metus id velit ullamcorper pulvinar. Pellentesque arcu. Pellentesque ipsum. Fusce tellus.</p>
<p>Mauris elementum mauris vitae tortor. In dapibus augue non sapien. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Donec iaculis gravida nulla. Praesent dapibus. Proin mattis lacinia justo. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Nunc auctor. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Integer vulputate sem a nibh rutrum consequat. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Ut tempus purus at lorem. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Aliquam erat volutpat. Fusce tellus. Quisque porta. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce wisi. Pellentesque pretium lectus id turpis. Integer in sapien. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem.</p>
<p>Mauris metus. Fusce tellus. Fusce aliquam vestibulum ipsum. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Maecenas sollicitudin. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Donec iaculis gravida nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer imperdiet lectus quis justo. Integer malesuada. In sem justo, commodo ut, suscipit at, pharetra vitae, orci.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Vestibulum fermentum tortor id mi. Nam sed tellus id magna elementum tincidunt. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Aliquam in lorem sit amet leo accumsan lacinia. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Donec iaculis gravida nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla quis diam.</p>
<p>Suspendisse sagittis ultrices augue. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Mauris elementum mauris vitae tortor. Mauris metus. Nulla pulvinar eleifend sem. In dapibus augue non sapien. Phasellus rhoncus. Cras elementum. Nullam faucibus mi quis velit. Pellentesque ipsum. Sed ac dolor sit amet purus malesuada congue. Et harum quidem rerum facilis est et expedita distinctio.</p>
<p>Pellentesque pretium lectus id turpis. Quisque tincidunt scelerisque libero. Curabitur sagittis hendrerit ante. Vestibulum fermentum tortor id mi. Nullam sit amet magna in magna gravida vehicula. Nullam dapibus fermentum ipsum. Duis pulvinar. Mauris elementum mauris vitae tortor. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Praesent vitae arcu tempor neque lacinia pretium. Nullam sit amet magna in magna gravida vehicula. Quisque tincidunt scelerisque libero. Etiam posuere lacus quis dolor. Praesent vitae arcu tempor neque lacinia pretium. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Etiam commodo dui eget wisi. Maecenas libero.</p>
<p>In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Aliquam erat volutpat. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Vivamus luctus egestas leo. Vestibulum fermentum tortor id mi. Etiam neque. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Nulla non arcu lacinia neque faucibus fringilla. Mauris elementum mauris vitae tortor. Integer tempor.</p>
<p>Mauris tincidunt sem sed arcu. Et harum quidem rerum facilis est et expedita distinctio. Pellentesque ipsum. Phasellus faucibus molestie nisl. In dapibus augue non sapien. Nullam at arcu a est sollicitudin euismod. Curabitur vitae diam non enim vestibulum interdum. Etiam posuere lacus quis dolor. Integer pellentesque quam vel velit. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Integer imperdiet lectus quis justo. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec quis nibh at felis congue commodo. Fusce wisi.</p>
</div>
</body>
</html>
Adding the following CSS code resolved the issue:
#page chapter:first {
#top-center {
font: 11pt "Bookerly", serif;
content: "";
vertical-align: bottom;
padding-bottom: 2em;
font-variant: small-caps;
color: #888888;
}
#bottom-center {
font: 11pt "Bookerly", serif;
content: counter(page);
padding-top: 2em;
vertical-align: top;
}
}