This is the reference of the result i want
I tried putting this in css
body {
background: black;
}
p {
color: #333;
margin: 0;
padding: 0;
background: url('https://i.stack.imgur.com/TaaMS.jpg');
text-align: justify;
filter: grayscale(100%);
background-position: center;
background-attachment: fixed;
background-clip: text;
-webkit-background-clip: text;
-webkit-background-fill-color: rgba(255, 255, 255, 255);
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit
ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor.
Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas, justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem eget ipsum vulputate dapibus. Vivamus a dui malesuada,
posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas, justo porttitor ornare tristique, velit neque pulvinar
ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet
imperdiet ligula porta a. Vestibulum tristique sem eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id
lectus eget urna finibus tincidunt. Maecenas egestas, justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt
accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla
facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas, justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna
consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum
tristique sem eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas
egestas, justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci,
ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula
porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas, justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem eget ipsum vulputate dapibus. Vivamus
a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas, justo porttitor ornare tristique, velit
neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum
eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida.
Cras id lectus eget urna finibus tincidunt. Maecenas egestas, justo porttitor ornare tristique, velit neque pulvinar ligula,</p>
but it doesn't seem to work
The image I am using
Add an extra background layer with blending and make sure the text color is transparent. You can then easily control the blend mode and the transparency of the extra layer:
body {
background: black;
}
p {
margin: 0;
padding: 0;
line-height:1em;
font-size:14px;
background:
linear-gradient(rgba(0,0,0,1),rgba(0,0,0,1)),
url('https://i.stack.imgur.com/TaaMS.jpg') center/cover;
text-align: justify;
background-attachment: fixed;
background-clip: text;
-webkit-background-clip: text;
-webkit-background-fill-color: transaprent;
color:transparent;
background-blend-mode:color;
}
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero .</p>
Or with filter but also keep the text transparent:
body {
background: black;
}
p {
margin: 0;
padding: 0;
line-height:1em;
font-size:14px;
background:
url('https://i.stack.imgur.com/TaaMS.jpg') center/cover;
text-align: justify;
background-attachment: fixed;
background-clip: text;
-webkit-background-clip: text;
-webkit-background-fill-color: transaprent;
color:transparent;
filter:grayscale(100%);
}
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero .</p>
Your result already displayed the image, but:
Your line-height and font-size should be set at a low px amount
to see the image better on top of the text you should increase the contrast and brightness
This is my approach:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 0;
background:black;
font-family:Arial, Helvetica, sans-serif;
}
.wrapper {
color: black;
background:url('https://i.stack.imgur.com/TaaMS.jpg') ;
text-align: justify;
filter: grayscale(100%) contrast(1.1) brightness(5);
background-position: center ;
background-attachment:fixed;
background-blend-mode: overlay;
background-clip: text;
-webkit-background-clip: text;
-webkit-background-fill-color:rgba(255, 255,255,255);
line-height: 12px;
font-size: 12px;
}
</style>
</head>
<body>
<div class="wrapper">
Lorem ipsum dolor sit amet consectetur adipisicing elit. A saepe sit vero sunt animi, possimus adipisci dignissimos, impedit velit error, nam labore? Soluta, ratione! Non blanditiis quaerat ratione nisi aspernatur.
Repellendus, dolor maiores aut quae ut sed fuga aliquid cum, minima in totam reprehenderit magni debitis officia earum quaerat omnis vel delectus? Iure veniam facilis harum, necessitatibus officiis aliquid cumque.
Amet, mollitia. Natus rerum iusto adipisci possimus tenetur. Odio hic quidem tempora, magnam quia dicta quam veniam pariatur rerum incidunt ipsum a veritatis aut autem asperiores laudantium ratione vero deserunt?
Quos amet cum, numquam nulla nisi corrupti quae accusantium. Ipsa sit odit delectus incidunt! Quam, quo maxime. Nam vero deleniti sint eveniet ducimus, illum magni laboriosam maiores mollitia, alias necessitatibus.
Mollitia iure impedit, blanditiis iste velit est nisi esse odio corporis. Ut mollitia illo soluta tenetur nisi provident deleniti aperiam praesentium non unde consectetur quia veritatis blanditiis dicta, suscipit placeat!
Quia temporibus ipsa, qui porro modi enim similique, aliquam dolorem fuga unde dolorum sint totam saepe velit veritatis harum dolor commodi quibusdam sapiente adipisci nam non! Non doloremque vero magnam.
Magnam quae, voluptatum enim tempora consequatur facilis odio quis, corrupti ab aperiam itaque autem accusantium similique assumenda voluptatem aliquam! Quod dolorem molestiae illum illo magnam fugiat temporibus qui voluptas modi.
Assumenda quos numquam voluptas voluptatibus minus obcaecati incidunt recusandae repudiandae iusto provident adipisci enim fugiat, doloribus delectus sit iste suscipit, temporibus mollitia facere deserunt illo maiores est? Reprehenderit, consectetur vitae?
Numquam, vitae aliquam. Placeat sequi aut aspernatur similique voluptatem ea voluptatibus quaerat earum suscipit explicabo doloribus nam animi, pariatur a perferendis et voluptatum exercitationem delectus quibusdam obcaecati temporibus fugiat. Voluptate!
Quia voluptate alias, voluptatum consectetur dolorum assumenda quam amet voluptas, sapiente voluptatem quasi aliquam aspernatur eos dolor voluptatibus veritatis. Reprehenderit sed ipsum consectetur iusto ut consequatur autem quibusdam, accusantium et.
Quidem, provident accusamus incidunt non sunt ut similique tempore, corrupti eos harum molestias obcaecati ipsum repellat asperiores consectetur expedita eius id maiores iure commodi a corporis! Sit laboriosam eaque facere.
Soluta, error fugiat? Possimus non blanditiis ex fugiat voluptas dignissimos. Obcaecati atque recusandae labore delectus soluta accusamus dolorum qui, alias cumque excepturi ad animi iste consequatur fuga! Deleniti, cum sit!
Fugiat nobis magni ipsam consectetur in, dicta, error, aliquam perspiciatis doloribus illo atque laborum! Rem harum ab voluptates quae aliquid odit, quam sunt. Soluta consequatur fugit vitae hic, ipsa est.
Hic, est nulla recusandae ex eveniet voluptas ipsum dolor odit, excepturi ab modi consectetur culpa repellat doloremque similique. Quod ipsa ex distinctio molestias molestiae nemo autem? Fugit culpa consequuntur iusto?
Neque quisquam dicta veritatis quod accusantium itaque repudiandae possimus consequatur blanditiis. Harum voluptas eius, facere iste quaerat nam ratione dolor fuga cum praesentium voluptatum eaque quis impedit nisi quia. Quo.
Aperiam nisi voluptatibus necessitatibus expedita sunt natus inventore, architecto amet dolor eveniet molestias corrupti quibusdam aliquid saepe qui vitae animi ipsum maiores numquam sequi esse repellat molestiae est. Voluptates, enim.
Explicabo vel animi, delectus quisquam doloribus ipsa enim nulla dicta pariatur ipsum asperiores eos adipisci impedit magni quis beatae! Perferendis culpa reprehenderit illum nemo cum aliquam molestias expedita id dolores.
Totam repellat dicta, iste, quis praesentium, esse quos aliquid commodi ipsam dignissimos magnam perferendis quod doloremque. Expedita odit eveniet voluptatibus, rem, accusamus modi asperiores alias itaque sapiente quas dicta corrupti.
Dignissimos ab voluptate expedita illo, in non voluptatibus iste facilis nihil vero architecto fugiat ut quos quisquam nam praesentium. Facilis iusto sunt fugiat. Perferendis temporibus praesentium nam autem laudantium et.
Deleniti, obcaecati adipisci. Consectetur corrupti corporis debitis quidem iusto eos incidunt, perspiciatis ex enim molestias dolorem, illo placeat, expedita accusantium optio dignissimos maiores similique. At aliquid cum dicta aliquam vel!
Nostrum totam aliquam rem praesentium incidunt omnis rerum velit doloremque eius perspiciatis corrupti nam qui eum ratione temporibus, ad beatae deleniti dolorum consequatur labore ducimus, reprehenderit eligendi. Ea, reprehenderit eaque.
Accusantium similique consectetur at blanditiis maxime dicta qui ad cumque. Eaque minus rerum voluptates rem sed deleniti nostrum consequuntur impedit, earum debitis ea libero nisi aliquid autem delectus, veritatis obcaecati?
Porro suscipit ipsa recusandae iusto in qui asperiores modi id. Maiores voluptatum nisi commodi, tenetur atque iste quam animi sit eum incidunt odit obcaecati alias velit molestiae iusto vero provident.
Placeat molestiae similique officia, iusto hic amet eum eveniet consequuntur recusandae perferendis nesciunt explicabo minus. Deserunt ea a impedit sunt veniam rerum iure tempora sint ullam nihil? Ab, quidem iste.
Odio, ipsam. Beatae ea quo eius, nisi nesciunt voluptatum nam numquam officiis eos iure unde dolores? Dicta ratione similique neque aspernatur! Delectus ex quasi culpa veniam aperiam accusamus maiores dignissimos.
Officiis impedit cupiditate, ea aperiam libero repellat doloribus culpa quia eaque harum distinctio earum ducimus ullam nemo! Voluptates aspernatur deleniti voluptatem tempora, impedit repudiandae, id quis velit doloremque, deserunt perferendis!
Non, aliquam suscipit? Molestiae iusto at blanditiis suscipit, ad dicta quos error numquam ex labore voluptatibus dolorum, facilis dolores corporis expedita sint a similique earum ea placeat magnam beatae? Iusto.
Quo commodi veritatis recusandae corporis ullam, ab ratione natus cupiditate laborum quisquam beatae illum atque maiores perferendis assumenda. Accusantium, veniam. Labore aut corrupti recusandae modi quasi, iste blanditiis. Molestias, dolores.
Debitis possimus quibusdam, enim iste eum explicabo neque aspernatur incidunt esse architecto, perspiciatis molestias repellendus. Reprehenderit veniam a accusantium. Cupiditate autem ab repellendus, ipsam aspernatur eaque sint nisi molestiae consectetur?
Cum quasi, soluta reiciendis, esse ipsam natus qui fuga a quae dolores adipisci velit consequuntur dolore inventore quisquam ut incidunt, ipsum cupiditate. Modi, ipsa libero quas praesentium voluptas tenetur voluptate.
Veritatis, quae autem eligendi voluptatibus, consectetur libero numquam minus aspernatur quis magni ipsum ad vitae incidunt temporibus magnam in optio repudiandae odio laboriosam vel? Dolore incidunt tenetur sapiente nemo. Maiores?
Asperiores unde labore nobis. Ea non harum autem veniam, laboriosam cumque eum cum placeat. Repellendus expedita temporibus voluptas nam adipisci quasi cum ab quae maxime laboriosam. Ab rem magnam blanditiis?
Magnam incidunt totam deleniti omnis commodi voluptatibus officia, repudiandae ipsam debitis voluptatem? Fugit consectetur tempore reiciendis vel numquam, ducimus aliquam esse. Delectus fugit vitae atque doloremque. Molestias ipsum inventore quia.
Odit asperiores quisquam ad debitis ullam minima accusantium amet, consectetur quae, blanditiis provident cupiditate sapiente, nostrum dolorum id quas perferendis cum voluptates esse dolorem? Earum, aspernatur? Vel debitis quidem aspernatur?
Eos aperiam labore id sed pariatur necessitatibus eum! Adipisci magni et magnam iste, repellat minima dolorem debitis nulla aliquid delectus unde asperiores, soluta est praesentium cum repudiandae. Necessitatibus, quas porro.
Quas facilis, sapiente exercitationem temporibus beatae, odit vitae a suscipit modi ipsum distinctio ut inventore! Ullam molestiae aut incidunt aspernatur tempora eligendi rerum ea voluptatibus consequuntur debitis ab, vero nemo.
Ullam voluptatem deserunt quis voluptates harum molestias recusandae animi voluptatibus asperiores accusantium quo aliquid magni ipsa, voluptate similique ipsum, laborum sapiente commodi odio quae quisquam architecto officia nostrum. Minus, sapiente.
Dolorum aut unde magni et eligendi excepturi reprehenderit consequatur nam rerum atque ab, fugit voluptatum quisquam dolor quae sapiente deserunt quaerat sit sed harum exercitationem esse. Incidunt nobis cupiditate unde.
Adipisci maxime ad, alias porro tempore quod, rem voluptate unde natus tenetur laborum fugit nesciunt commodi et. Eos sit nisi numquam ratione atque maiores, accusantium animi omnis enim, sunt provident.
Inventore libero voluptatem reprehenderit repellendus id aliquid sequi itaque ipsa sit voluptates mollitia in tempore facere iste, repudiandae earum iusto commodi. Nemo dolorum accusantium enim ducimus natus incidunt, voluptate saepe?
Optio a quos voluptas vero sint numquam ex quas placeat commodi voluptates id porro magni eligendi quidem, doloribus eum rem? Nostrum doloribus corporis, minima iste neque quod dolore magni illo!
Optio error saepe doloremque, ex maiores inventore ab, aperiam eveniet iure suscipit et voluptatum nam assumenda cumque labore culpa repellendus natus, quae beatae in eaque. Voluptatum impedit commodi id illo.
Asperiores laudantium, maxime veritatis voluptate accusamus sapiente suscipit? Odio totam, omnis eum amet quia dolor! Ab, corrupti! Vitae assumenda ipsa, officiis facilis eveniet nemo quia culpa ratione delectus sapiente qui!
Sed aliquam soluta mollitia, tempora, ullam vero nemo porro culpa incidunt vel doloremque ducimus minima. Alias laudantium quas, excepturi facere minima repudiandae odio sed nostrum. Odit natus inventore tempora suscipit.
Totam nesciunt sequi, aspernatur distinctio voluptatem delectus alias cum consequuntur optio natus hic deleniti, iste, asperiores nulla placeat voluptate in dolores nobis tempore possimus perferendis expedita! Esse incidunt iusto aliquam.
Nisi provident placeat inventore explicabo quas ea cum illo enim ipsam alias ducimus eius aspernatur maiores nemo voluptate numquam recusandae, sed dolor culpa cupiditate aut. Veniam accusamus velit odit omnis!
Optio eos cupiditate velit neque quis reiciendis, ipsam iste commodi mollitia? Ipsa consequuntur laudantium quae repudiandae officiis quis, natus culpa libero perferendis, qui fugit quia iure vel praesentium quo nobis!
Iure optio, odio consequuntur distinctio harum omnis repudiandae facere aspernatur dolorum architecto perferendis aperiam eum magnam quasi voluptate, minima magni nobis eveniet nemo temporibus corrupti qui excepturi molestiae? Sapiente, doloremque.
Perferendis totam dolorem necessitatibus dolore placeat sapiente saepe accusantium? In assumenda commodi voluptatum eius rerum perspiciatis excepturi omnis velit deserunt quasi architecto molestias nihil facere, tempore atque libero earum vitae!
In, animi harum? Illo odit earum minus provident voluptas atque nostrum, repellendus ducimus sed culpa expedita libero quidem odio beatae vitae quos, nam ad quisquam aperiam? Odio itaque cupiditate nulla.
Dolores placeat sequi, ipsum adipisci natus molestias sint, necessitatibus maxime dolorum voluptates earum similique voluptatibus dolore iste minima magnam doloribus expedita optio repellendus vitae impedit dolor! Eum ipsum soluta aliquid.
Minima, perferendis, vitae neque praesentium ullam veritatis illum quam, earum pariatur natus suscipit omnis et itaque in excepturi architecto facilis odit quo doloribus quas laudantium accusantium asperiores! Rerum, unde fuga?
Doloremque quia atque in repudiandae beatae sapiente, id commodi dolore est, incidunt voluptates accusantium culpa amet fuga suscipit eos nostrum minima sint accusamus ipsa! Animi dignissimos temporibus magni soluta voluptatum.
Maiores eligendi officiis molestias laboriosam consequatur vel corrupti minima architecto explicabo? Nemo maxime temporibus deserunt consectetur molestiae, suscipit, ipsam repellat neque fuga similique autem tenetur atque? Distinctio eius perspiciatis aut.
Blanditiis ipsa minima doloremque accusantium laborum. Maxime illum numquam, tempora nihil nam doloremque, quis exercitationem rem aspernatur rerum in dicta ab nobis nesciunt, iusto eius totam ducimus error eveniet distinctio.
Porro quis eaque sunt cumque voluptatem maiores corporis iure excepturi quae nisi, doloribus et veritatis quidem omnis rem corrupti dolor exercitationem in autem dolores aut? Optio sint molestias quisquam dolore?
Facilis, atque maiores. Quod eaque error unde molestias saepe et, vitae aliquid cumque laboriosam ab veritatis obcaecati architecto quam, harum veniam eius mollitia quis illum ipsam accusamus tempore deleniti? Eos!
Voluptatem nihil vitae iure cumque magnam eius id magni ducimus quos eveniet ad molestiae saepe, facilis qui est corporis labore unde accusamus explicabo. Cupiditate minus et dolores distinctio quidem vero!
Fugit nam ullam voluptates ipsa quo aliquam deleniti? Sint distinctio fugit repudiandae facilis nobis ipsa nam, odit nesciunt nostrum illo quos non obcaecati libero nemo minus pariatur similique quibusdam iusto!
Iure inventore repudiandae neque assumenda dolor ad unde eius sunt, expedita veritatis eum sed necessitatibus sint odit quia voluptates dolorem vero commodi eligendi illum eveniet obcaecati deserunt rerum. Ut, voluptatibus.
Culpa aspernatur ipsa, fugiat porro voluptatem minima. Similique, eos tempore. Officiis, rerum! Doloribus minus iure fugiat quae a sed? Officiis, fugit asperiores vero amet architecto minima explicabo earum reiciendis adipisci.
Error vel at officiis suscipit rem quae nam quo voluptatem incidunt natus accusantium consequuntur corrupti adipisci blanditiis aperiam eum, recusandae sapiente porro quaerat distinctio eaque. Laudantium amet nisi et dicta!
Nobis totam placeat quis, iste reprehenderit unde quisquam veritatis magnam fuga quibusdam. Ex accusantium perspiciatis perferendis quaerat neque, id ipsam qui fugit maxime magnam repudiandae voluptates expedita voluptatibus vitae incidunt?
Hic voluptate perspiciatis debitis qui aspernatur rerum dolorem maiores repellat nesciunt? Nihil voluptatibus dolorum excepturi, aut deserunt sunt dolores voluptate, neque praesentium nam hic quae ab minus dolorem eligendi iste!
Nihil accusamus illo omnis, repellendus officia fuga explicabo sunt autem iste nisi voluptatum quo eveniet, minima exercitationem aspernatur earum ratione enim aliquid cupiditate ab natus molestias adipisci vitae unde! Cum?
At facere nulla consectetur repellat perferendis praesentium esse. Fugiat dolorum fuga modi deserunt, neque nulla, vel rem aut tempore ratione tempora quidem sapiente debitis molestias ab nemo delectus culpa autem?
Atque doloremque nihil dolore culpa rem. Eligendi debitis placeat voluptate aut nihil nam doloribus? Eos rerum alias, id sapiente distinctio amet possimus aliquid. Eos, modi numquam consectetur exercitationem sequi sapiente.
Molestias consequatur maiores distinctio. Nam, vero beatae sed incidunt, dolore labore obcaecati reprehenderit natus assumenda pariatur aliquid illo. Nostrum aliquid atque officia eius consequatur ad voluptates laboriosam vero ipsa hic!
Cupiditate cumque repellendus voluptas, eveniet pariatur eaque corporis ducimus qui illum veniam tempore, doloremque id rerum, quam alias fuga. Recusandae ad repellendus totam possimus quasi illum sit nesciunt cum laboriosam.
Nam similique fuga reiciendis! Doloribus laborum ex laboriosam minus magni architecto earum deleniti molestias nulla rem nisi suscipit ratione neque commodi deserunt cum consectetur totam labore, quaerat, corrupti voluptatum doloremque.
Atque nostrum corrupti aliquam, expedita facilis accusantium omnis voluptatibus nobis eligendi libero perferendis a exercitationem odio! Dolorum nisi cumque, error voluptates molestias illum, labore blanditiis, accusantium molestiae doloribus sed odio?
Nam voluptatum cumque, libero a quibusdam dolor dignissimos? Voluptatum eveniet porro qui autem voluptate? Labore alias quas ipsum illo voluptates eaque officiis necessitatibus ipsa distinctio adipisci asperiores, omnis quisquam facere!
Non alias distinctio magnam unde, assumenda perspiciatis perferendis ratione veritatis amet quisquam, expedita cupiditate corporis est sequi cum reiciendis minus fugiat at placeat dolore quibusdam harum consequatur maxime! Ipsam, eligendi?
Consequatur commodi repudiandae beatae aliquid, repellendus odit repellat, labore odio tempore, similique sit et. Repellendus, sit natus vel quo maxime illo nam dolorem incidunt magni repellat! Labore harum eos tempore!
Nam, debitis. Vel nemo corporis eos aliquam deleniti debitis nesciunt, quibusdam inventore vero, quaerat ea blanditiis ipsum accusantium ab fugiat dolor corrupti. Quaerat quae fugit fuga. Veritatis ut dolorem temporibus.
Vitae animi rem dignissimos minus ad quod rerum laboriosam. Quaerat accusantium voluptatem obcaecati ex praesentium iure iste! Excepturi voluptas quidem deserunt tempora debitis minus ducimus sapiente rem quas. Nemo, optio.
Cumque officia, distinctio qui aperiam pariatur eveniet deleniti voluptas nihil illo debitis ab quaerat dolorum, adipisci, vel eum placeat veritatis. Excepturi perferendis non possimus officia reiciendis error facilis aliquam nesciunt!
Illum ipsam nemo quae dolores asperiores recusandae, adipisci culpa necessitatibus nobis vel inventore modi, ad delectus. Corrupti, reprehenderit aliquam, illo illum esse quasi praesentium perspiciatis, aut earum placeat ipsam eaque.
Non, commodi reiciendis inventore rem voluptatem labore voluptates libero cupiditate quae eos quibusdam nobis perspiciatis quas id eum cumque natus explicabo, iste nostrum minima nemo quidem distinctio voluptatum illum! Aperiam.
Similique deleniti eligendi placeat repudiandae odio, blanditiis corporis qui doloribus asperiores beatae accusantium magni omnis debitis impedit rem voluptatibus, quos reprehenderit illo inventore consequatur nihil! Possimus neque pariatur vitae deserunt.
Rem, quaerat totam unde perferendis laboriosam iste cumque non accusamus nobis suscipit a necessitatibus laborum dolorum, doloribus nemo! Eius reiciendis esse labore ea quis optio distinctio, assumenda maiores beatae dignissimos!
Cumque esse perferendis facilis? Laborum optio ad sunt, quo numquam est? Accusamus culpa voluptatem minima non eum, amet dolore quo id unde totam veniam consequatur maxime nostrum saepe corrupti vero.
Unde nisi fugiat totam itaque dolorem nesciunt assumenda adipisci quos quisquam velit quibusdam ut animi est dolores molestias, ea praesentium eveniet placeat? Animi eos at reprehenderit, assumenda similique incidunt explicabo.
Fugit debitis voluptatum tempore hic totam adipisci tenetur laboriosam, assumenda cum! Pariatur debitis cupiditate aliquam necessitatibus in iure expedita mollitia alias sed eius veritatis perferendis repudiandae quidem, optio, vero magni?
Fugiat sit dolore numquam delectus voluptatem qui eveniet natus illo deleniti, soluta laborum expedita accusantium minus cum nesciunt, sunt quidem porro incidunt tempore, quisquam ducimus alias! A harum iusto quia.
Sed voluptas cum sequi? Fugiat perferendis quae totam quibusdam, earum nesciunt distinctio. Soluta odio minus earum est provident animi, quaerat praesentium. Blanditiis, quidem quibusdam! Hic accusamus totam rerum quasi praesentium.
Delectus, eligendi fugit minima dicta at, quia beatae, dignissimos tempore expedita deserunt soluta autem numquam sequi sunt iusto ullam adipisci velit consectetur id quae neque quibusdam quo eum. Nostrum, dolorum.
Enim exercitationem fuga sed id beatae vel facilis, debitis maiores ipsum sint! Cumque rerum ipsum eum tenetur ducimus magnam quo, blanditiis voluptas nesciunt atque similique ea quas sapiente nisi perferendis.
Eum quos quae dolorem, harum quod possimus? Pariatur, doloremque non? Aperiam rerum ad molestias, natus, harum ipsum cumque sit laboriosam reprehenderit, animi maiores doloremque vel nulla culpa. Possimus, minus consequatur!
Dolor quia possimus pariatur est suscipit excepturi harum, tempora expedita quasi, voluptates aliquam impedit eveniet nam quas ipsam ipsa amet quis ipsum. Ratione architecto nam praesentium voluptate similique eos pariatur?
Consequuntur autem debitis exercitationem, voluptate dicta veritatis maiores esse deleniti, sequi natus blanditiis ipsam labore. Perferendis nam dignissimos, exercitationem architecto, asperiores non magnam molestias, in illo impedit sequi temporibus. Quasi.
Modi temporibus placeat accusamus non, dolor quas blanditiis molestiae dignissimos consequuntur officia quaerat dicta eligendi soluta animi, illum tempora dolorum! Totam ducimus id ipsam! Illo qui reprehenderit distinctio fugiat modi?
Quos, sint dolorum reprehenderit omnis suscipit quis veniam eaque et sed debitis consequatur? Dolorem sequi expedita mollitia ipsa, laudantium ratione aut repellendus hic ab non quidem ullam labore deleniti ea?
Quod facere voluptate, consectetur voluptatem corrupti sint odio. Doloremque quis soluta repellat, dolore impedit accusamus, saepe iste numquam quia cupiditate distinctio aut nesciunt aliquid pariatur cumque quod voluptas in earum?
Ea recusandae totam neque. Neque nostrum accusantium, quia non veniam est qui. Quam, laboriosam ratione quaerat exercitationem dolor molestias id aspernatur quia adipisci sequi et qui asperiores perferendis ipsam deserunt!
Similique, obcaecati velit. Sapiente quos voluptates tenetur, consectetur distinctio perferendis, beatae, facilis placeat odit ducimus provident. Omnis neque sunt impedit nihil eveniet. Vitae eum illum aperiam eos, modi soluta excepturi.
Nobis fugiat quisquam omnis consequuntur repellendus alias deserunt voluptate! Nihil voluptatem minima nesciunt numquam hic rerum ipsum officia cumque alias quo? At possimus quae consequuntur cum consectetur quidem, iusto aliquam!
Excepturi rerum quibusdam est autem aut hic recusandae sequi, minus aspernatur mollitia qui natus totam fuga. Minima a, eos amet tempore dolore debitis modi minus numquam quaerat et, labore voluptatem?
Temporibus pariatur sapiente, eligendi voluptatem accusamus nostrum perspiciatis sit? Doloremque fugit repellat, nostrum quod velit nihil dolore culpa labore eius voluptatem cum officia cumque architecto est non ut nemo? Magnam!
Consequuntur libero laboriosam sint iste voluptatum, odio quidem aspernatur voluptate voluptates ducimus autem perspiciatis quis distinctio veniam cupiditate ea, ex fugit repellendus! Vitae vero perspiciatis id ullam fugiat voluptatibus assumenda!
</div>
</body>
</html>
I changed the things mentioned before as well as the text color (to black)
Output:
You can play with the numbers of the contrast and brightness to get a better result.
I hope this helps!
Good luck!
Related
This is the kind of magazine style effect I am looking to recreate:
Using floats I seem only to be able to achieve text flowing underneath.
Using shape-outside I seem to be only able to use one shape per div of text at a time. Ideally I would be using multiple against the same div.
I have also tried using css grid, trying something to this effect to wrap text around the top and bottom of just one image:
.mygrid {
display: grid;
grid-template-rows: 150px 150px 150px;
grid-template-columns: 150px 150px;
grid-template-areas:
"para para"
"image para"
"para para";
}
.lorem {
background-color: red;
grid-area: para;
}
.image {
background-color: blue;
grid-area: image;
}
<div class="mygrid">
<div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
<div class="im">I'm the image!</div>
</div>
What you look for is a typical float use. Grid is not yet able to do these kind of things, flowing text through different grid cell
example
.l{float:left;}
.r{float:right}
/* demo */
img{padding: .25em .25em 0;}
p{width:400px;border:solid;margin:1em auto;}
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.<img class="l" src="https://dummyimage.com/100x50"> Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.<img class="r" src="https://dummyimage.com/100x50"> Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
From your code you posted, dropping the grid system and using float instead, an option could be : (setting image ahead in the flow)
.mygrid {
width:300px;
}
.mygrid:before {
height:150px;
float:left;
content:''
}
.im{
clear:left;
float:left;
width:150px;
height:150px;
background:gray;
display:grid;
align-content:center;
text-align:center;
}
/* 2 images ? */
body{
display:flex;justify-content:space-between;
}
.im~.im {float:right;}
.mygrid+.mygrid .im {background:silver}
.lorem:before{
content:'';
float:left;
height:300px;
}
<div class="mygrid">
<div class="im">I'm the image!</div>
<div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
<div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
<div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
<div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
<div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
</div>
<div class="mygrid">
<div class="im">I'm the image!</div>
<div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
<div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
<div class="im">I'm the image!</div>
<div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
<div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
<div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
</div>
I have been trying to solve this problem for hours but just can't
.container {
position: absolute;
top: 50%;
background-color: white;
}
.text1 {
float: left;
z-index: 0;
color: black;
}
#face1 {
z-index: 0;
float: right;
top: 10px;
}
<div class="container">
<h1 class="text1">Povjerenje</h1>
<p class="text1" align=l eft>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget facilisis justo. Etiam non gravida leo. Integer venenatis massa massa, ultrices ornare ex molestie sit amet. Nulla imperdiet dignissim metus sit amet imperdiet. Etiam fermentum scelerisque
commodo. Integer porta euismod nisl sit amet tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas vulputate aliquet orci sed scelerisque. Integer vulputate et dolor at hendrerit. Maecenas aliquam
elit tellus, sed condimentum felis dictum eget. Sed justo tellus, pulvinar vel egestas ac, scelerisque ut nulla. Nam aliquam ligula quis eros eleifend tempus. Pellentesque rhoncus efficitur elit eget sagittis.ntesque rhoncus efficitur elit eget
</p>
<img id="face1" src="http://placekitten.com/100/100">
</div>
I have a div container holding an image and text and I wan't to make texrt wrap around the image but it always go below or above the image. What I want to do is automatic wraping of text over the image so I can move it and text will automatically move coresponding to it.
Any ideas on how to fix it?
Thanks
Put the image inside the paragraph.
.container {
background-color: white;
}
.text1 {
color: black;
}
#face1 {
float: right;
}
<div class="container">
<h1 class="text1">Povjerenje</h1>
<p class="text1" align=l eft><img id="face1" src="http://placekitten.com/100/100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget facilisis justo. Etiam non gravida leo. Integer venenatis massa massa, ultrices ornare ex molestie sit amet. Nulla imperdiet dignissim metus sit amet imperdiet. Etiam fermentum scelerisque
commodo. Integer porta euismod nisl sit amet tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas vulputate aliquet orci sed scelerisque. Integer vulputate et dolor at hendrerit. Maecenas aliquam
elit tellus, sed condimentum felis dictum eget. Sed justo tellus, pulvinar vel egestas ac, scelerisque ut nulla. Nam aliquam ligula quis eros eleifend tempus. Pellentesque rhoncus efficitur elit eget sagittis.ntesque rhoncus efficitur elit eget
</p>
</div>
use css float: right; / float: left;
image must be before the text
no need to be part of <div> with text
img {
float: right;
margin-left: 10px;
}
p {
margin-top: 0;
}
<img src="http://placehold.it/100x100" alt="" />
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi cum doloremque eum impedit, libero modi, natus nulla omnis quaerat sapiente sed suscipit vel? Aliquid corporis cupiditate, dolore dolorem eius facilis hic illo iste libero magni maiores maxime, necessitatibus, odit officiis optio perferendis placeat porro praesentium recusandae repudiandae suscipit tempore totam ullam vel veritatis vitae voluptate voluptatibus? Accusantium aperiam, cum dignissimos dolore est et hic impedit, magnam numquam obcaecati provident quisquam saepe? Amet enim est explicabo impedit in modi nobis perferendis provident totam! Ab, accusantium aliquam aut autem consequatur cupiditate, deleniti dignissimos distinctio dolor ea eveniet excepturi facilis harum id impedit iure iusto laboriosam modi molestiae nam necessitatibus nihil nobis omnis perspiciatis quaerat reiciendis rem repellat rerum sapiente tempore, unde velit vitae voluptates. Ab alias culpa cupiditate dolor dolorem ea esse et eum eveniet ex illo laboriosam natus qui quibusdam quos, recusandae voluptate! Accusamus adipisci alias animi asperiores distinctio dolorem dolorum ducimus ea earum enim eum facilis illo inventore labore maxime molestias nam neque nulla obcaecati, quod quos ratione recusandae soluta sunt ullam ut vero! Esse libero perspiciatis qui saepe sed veniam. A consectetur culpa deleniti doloremque doloribus nobis quaerat quidem quo saepe. Aut error nemo nostrum numquam quae ratione veritatis?</p>
</div>
I'm working in a system where I can modify the CSS but not the HTML (can't use javascript either). I'm trying to get the text to wrap around an image placed in the top right of a page. The problem I've been having is that every solution I've found requires that the image be listed before the text in the html. Is there a way around this? Thanks!
<style type="text/css">
#media only screen and (max-width:480px) {
img {
display:block;
float:none;
margin:0 auto 20px !important;
}
}
</style>
<div style="Margin:20px;">
<p style="Margin:0; font:16px/1.25 sans-serif; color:#4CB3E8; text-align:justify;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum.
</p>
<img src="http://i.imgur.com/6bkt2Qk.gif" align="right" width="140" height="140" border="0" style="Margin:0 0 20px 20px; background:#E79851;" />
</div>
There isn't really a way to do what you're describing, but you could definitely create a workaround, something like this:
img{
border-radius: 50%;
margin: 20px;
border: 2px solid black;
position: absolute;
top: 0;
right: 0;
}
div#main::before{
content: "";
float: right;
margin: 90px;
}
<div id="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fermentum et sollicitudin ac orci phasellus egestas. Vitae congue mauris rhoncus aenean vel elit scelerisque. Sed lectus vestibulum mattis ullamcorper. Gravida dictum fusce ut placerat orci nulla pellentesque dignissim enim. Sed augue lacus viverra vitae congue eu. Tellus orci ac auctor augue mauris. In iaculis nunc sed augue lacus. Quis commodo odio aenean sed. Sollicitudin nibh sit amet commodo nulla facilisi. Metus dictum at tempor commodo ullamcorper a lacus vestibulum sed. Scelerisque eleifend donec pretium vulputate sapien nec sagittis. Lorem ipsum dolor sit amet consectetur. Facilisis volutpat est velit egestas.
Dolor sit amet consectetur adipiscing. Id eu nisl nunc mi. Varius vel pharetra vel turpis nunc eget. Amet dictum sit amet justo donec enim. Diam donec adipiscing tristique risus nec. Integer quis auctor elit sed vulputate mi sit amet. Magna ac placerat vestibulum lectus mauris. Duis ultricies lacus sed turpis tincidunt id aliquet risus feugiat. Ullamcorper a lacus vestibulum sed arcu non odio euismod. Sit amet massa vitae tortor condimentum lacinia quis. Lectus proin nibh nisl condimentum id venenatis a condimentum. Nunc non blandit massa enim nec. Dolor sit amet consectetur adipiscing elit. Diam maecenas sed enim ut sem viverra. Viverra maecenas accumsan lacus vel facilisis volutpat est. Amet nulla facilisi morbi tempus iaculis urna. Mauris ultrices eros in cursus turpis massa tincidunt.
Eu volutpat odio facilisis mauris. Elit sed vulputate mi sit amet mauris. Dignissim convallis aenean et tortor at risus viverra. Lobortis feugiat vivamus at augue eget arcu dictum. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Congue eu consequat ac felis donec. Posuere lorem ipsum dolor sit amet consectetur adipiscing elit duis. Mi proin sed libero enim. Risus pretium quam vulputate dignissim suspendisse in est ante in. Pellentesque habitant morbi tristique senectus et netus et. Amet justo donec enim diam vulputate ut pharetra. Tristique magna sit amet purus gravida quis blandit turpis cursus.
Vel facilisis volutpat est velit egestas dui. Vitae nunc sed velit dignissim sodales ut eu sem integer. Aliquet enim tortor at auctor urna. Eget mauris pharetra et ultrices neque ornare aenean euismod elementum. Vel risus commodo viverra maecenas. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus in. Ut tellus elementum sagittis vitae et. Nunc sed blandit libero volutpat sed cras. Tellus in hac habitasse platea dictumst vestibulum rhoncus. Ornare arcu odio ut sem. Nisi scelerisque eu ultrices vitae auctor eu augue ut. Diam in arcu cursus euismod. Morbi tristique senectus et netus. Senectus et netus et malesuada fames ac turpis egestas. Duis at consectetur lorem donec massa. Tellus at urna condimentum mattis pellentesque id. Sed arcu non odio euismod lacinia.
<img src="https://via.placeholder.com/150">
</div>
I have been looking everywhere for an answer to this problem, but I haven't found one yet.
I have a page with a navigation bar at the top. I want the rest of the content to fill the page perfectly, but instead it overlaps downward and to the right, leading to scrollbars.
I am also unsure of how to separate the side div from the main div. I am currently using margin-left as W3C does, but this feels awfully messy, and has to be altered whenever the padding is changed.
I do not want any elements to have a fixed position if possible.
html, body {
margin: 0;
padding: 0;
}
#topnav {
background-color: #00FF00;
border-bottom: 2px solid black;
overflow: hidden;
}
#sidenav {
background-color: #FFFF00;
border-right: 1px solid black;
display: inline-block;
height: 100%;
overflow: scroll;
padding: 8px;
position: absolute;
width: 200px;
}
#main {
background-color: #FF00FF;
display: inline-block;
height: 100%;
margin-left: 217px;
padding: 8px;
position: absolute;
width: 100%;
word-break: break-word;
}
<div id="topnav">
<span>Top Navigator</span>
</div>
<div id="sidenav">
<span>Side Navigator</span>
</div>
<div id="main">
<span>Main Area</span>
</div>
Thank you for any help!
height: 100% represent the height of your page, and as you have your top bar, it is normal that your content is bigger than your page and then that scrollbars appears.
You should use height: calc(100% - <height-of-your-top-bar>); instead. You can also use the vh unit.
You also could use CSS Grid which is perfect for this case.
body {
display: grid;
grid-template-rows: 80px calc(100vh - 80px);
grid-template-columns: 200px auto;
}
#top {
grid-column: 1 / span 2;
background-color: green;
}
#side {
background-color: red;
}
#main {
background-color: blue;
}
<div id="top"></div>
<div id="side"></div>
<div id="main"></div>
Try this fiddle. Hope this is what you are looking for
Try this
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
#topnav {
background-color: #00FF00;
border-bottom: 2px solid black;
overflow: hidden;
width:100%
}
#sidenav {
background-color: #FFFF00;
border-right: 1px solid black;
display: inline-block;
height: 100%;
overflow: scroll;
position: absolute;
padding: 8px;
width: 300px;
}
#main {
background-color: #FF00FF;
display: inline-block;
height: 100%;
margin-left: 300px;
padding: 8px;
position: absolute;
width: calc(100% - 300px);
word-break: break-word;
}
Making a few modifications to the CSS and ensuring that your paddings does not affect the width and height of the elements, you can use the following:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#topnav {
width: 100%;
height: 56px;
background-color: #00FF00;
border-bottom: 2px solid black;
overflow: hidden;
}
#sidenav {
background-color: #FFFF00;
border-right: 1px solid black;
display: inline-block;
height: calc(100% - 56px);
overflow: scroll;
padding: 8px;
position: absolute;
width: 200px;
}
#main {
background-color: #FF00FF;
display: inline-block;
height: calc(100% - 56px);
margin-left: 200px;
padding: 8px;
position: absolute;
width: calc(100% - 200px);
word-break: break-word;
}
Done. You just needed to add a overflow: hidden; in your html, body tag.
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
#topnav {
background-color: #00FF00;
border-bottom: 2px solid black;
overflow: hidden;
width:100%
}
#sidenav {
background-color: #FFFF00;
border-right: 1px solid black;
display: inline-block;
height: 100%;
overflow: scroll;
position: absolute;
padding: 8px;
width: 300px;
overflow: scroll;
}
#main {
background-color: #FF00FF;
display: inline-block;
height: 100%;
margin-left: 300px;
padding: 8px;
position: absolute;
width: calc(100% - 300px);
word-break: break-word;
overflow: scroll;
}
<div id="topnav">
<span>Top Navigator</span>
</div>
<div id="sidenav">
<span>Side Navigator</span>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem asperiores doloremque similique nulla atque illum tempora aperiam placeat doloribus cupiditate provident fugit unde, vitae suscipit amet dolor sunt excepturi ullam incidunt tenetur. Saepe laudantium facere perspiciatis voluptatem earum fuga sequi. Veniam aliquid ipsam enim nobis natus maxime blanditiis, beatae iusto illo numquam. Repellat, impedit quia quas sequi velit ipsa exercitationem earum illo corrupti id veniam dolore magni recusandae similique numquam in minus autem perspiciatis natus voluptatibus libero laudantium animi voluptas ullam! Nobis deserunt, iusto hic doloribus alias quos nulla obcaecati! Reiciendis, debitis quibusdam deleniti reprehenderit dolore cum ipsam sint eum. Possimus quae sed enim, molestiae, vel ratione cum ipsam explicabo odit, id nihil aut nam! Qui tempora vitae temporibus dolore voluptatibus dolor laboriosam et reiciendis necessitatibus doloribus, voluptas error labore repellendus repellat minus. Amet quae qui incidunt ipsum unde, mollitia culpa accusantium repellat aspernatur pariatur aliquid ipsa consequatur at quam maxime nesciunt eius fugit beatae. Animi officia quos placeat fugit voluptatibus quibusdam earum! Amet illo, deleniti magni aspernatur facere dolorum eum, quaerat quos laborum aliquam nulla perspiciatis error pariatur harum necessitatibus! Ullam perferendis ex sequi amet quis neque? Ducimus porro quaerat et, dolorum mollitia officiis animi qui, est error quibusdam ut maxime dicta aperiam veniam sunt eaque deleniti praesentium facere natus ea expedita? Dolore aperiam quo, nesciunt commodi temporibus facilis veniam modi dolores vero consectetur, ratione officia sed inventore repellendus tempore? Natus ullam non voluptatem magni. Rerum alias veniam, distinctio numquam nihil minus laudantium accusamus? Tempore unde doloribus rerum ipsum excepturi nostrum non, aperiam at velit ipsa fuga maiores rem sint repellat dolorem. Iste animi illum, iure, ea qui voluptatum illo unde vero sequi error voluptatibus quibusdam corrupti quidem. Harum natus, ratione, fuga, voluptate iure nam eligendi quos sapiente magni a nulla ut! Suscipit dolorum aliquam tempora reprehenderit ratione placeat esse pariatur soluta iusto. Perferendis laborum eligendi numquam et blanditiis molestiae explicabo modi deleniti earum. Porro deserunt laborum deleniti excepturi accusantium similique. Animi, saepe consequatur? Eveniet eligendi adipisci similique error molestias animi repellendus porro iure reiciendis modi exercitationem ab, ratione perferendis quod ea quasi! Repellendus, ipsa veniam. Ducimus, possimus, sit quae explicabo blanditiis atque tenetur praesentium consequuntur labore ab architecto tempore distinctio nulla! Architecto excepturi molestiae sit nihil ipsa. Blanditiis cumque praesentium itaque quibusdam dolores ad accusantium quia, omnis eveniet ipsam maxime pariatur, quis debitis ea exercitationem quod libero perspiciatis nobis quam iste? Distinctio saepe nihil blanditiis optio maxime? Animi delectus laboriosam dignissimos architecto nesciunt, necessitatibus incidunt dolores, ex cumque voluptatum facere earum expedita iure dolor omnis voluptate consequatur repellendus nisi reiciendis. Aperiam, commodi dolorem. Cum eligendi at dolorem iste, dolores delectus. Laboriosam, amet eligendi itaque delectus reprehenderit tempora sequi illo molestias totam doloribus rem laborum quas maxime quos error cum, nostrum in similique omnis veniam laudantium odit? Animi non ratione blanditiis distinctio suscipit quibusdam fuga, ab ducimus reprehenderit nobis possimus cupiditate iste earum cum tempore sint minus sequi ipsum. Iusto vel enim soluta aliquid facere sed, sint optio eos repellendus mollitia aperiam iure assumenda illo veniam saepe deleniti dolore.
</div>
<div id="main">
<span>Main Area</span>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem asperiores doloremque similique nulla atque illum tempora aperiam placeat doloribus cupiditate provident fugit unde, vitae suscipit amet dolor sunt excepturi ullam incidunt tenetur. Saepe laudantium facere perspiciatis voluptatem earum fuga sequi. Veniam aliquid ipsam enim nobis natus maxime blanditiis, beatae iusto illo numquam. Repellat, impedit quia quas sequi velit ipsa exercitationem earum illo corrupti id veniam dolore magni recusandae similique numquam in minus autem perspiciatis natus voluptatibus libero laudantium animi voluptas ullam! Nobis deserunt, iusto hic doloribus alias quos nulla obcaecati! Reiciendis, debitis quibusdam deleniti reprehenderit dolore cum ipsam sint eum. Possimus quae sed enim, molestiae, vel ratione cum ipsam explicabo odit, id nihil aut nam! Qui tempora vitae temporibus dolore voluptatibus dolor laboriosam et reiciendis necessitatibus doloribus, voluptas error labore repellendus repellat minus. Amet quae qui incidunt ipsum unde, mollitia culpa accusantium repellat aspernatur pariatur aliquid ipsa consequatur at quam maxime nesciunt eius fugit beatae. Animi officia quos placeat fugit voluptatibus quibusdam earum! Amet illo, deleniti magni aspernatur facere dolorum eum, quaerat quos laborum aliquam nulla perspiciatis error pariatur harum necessitatibus! Ullam perferendis ex sequi amet quis neque? Ducimus porro quaerat et, dolorum mollitia officiis animi qui, est error quibusdam ut maxime dicta aperiam veniam sunt eaque deleniti praesentium facere natus ea expedita? Dolore aperiam quo, nesciunt commodi temporibus facilis veniam modi dolores vero consectetur, ratione officia sed inventore repellendus tempore? Natus ullam non voluptatem magni. Rerum alias veniam, distinctio numquam nihil minus laudantium accusamus? Tempore unde doloribus rerum ipsum excepturi nostrum non, aperiam at velit ipsa fuga maiores rem sint repellat dolorem. Iste animi illum, iure, ea qui voluptatum illo unde vero sequi error voluptatibus quibusdam corrupti quidem. Harum natus, ratione, fuga, voluptate iure nam eligendi quos sapiente magni a nulla ut! Suscipit dolorum aliquam tempora reprehenderit ratione placeat esse pariatur soluta iusto. Perferendis laborum eligendi numquam et blanditiis molestiae explicabo modi deleniti earum. Porro deserunt laborum deleniti excepturi accusantium similique. Animi, saepe consequatur? Eveniet eligendi adipisci similique error molestias animi repellendus porro iure reiciendis modi exercitationem ab, ratione perferendis quod ea quasi! Repellendus, ipsa veniam. Ducimus, possimus, sit quae explicabo blanditiis atque tenetur praesentium consequuntur labore ab architecto tempore distinctio nulla! Architecto excepturi molestiae sit nihil ipsa. Blanditiis cumque praesentium itaque quibusdam dolores ad accusantium quia, omnis eveniet ipsam maxime pariatur, quis debitis ea exercitationem quod libero perspiciatis nobis quam iste? Distinctio saepe nihil blanditiis optio maxime? Animi delectus laboriosam dignissimos architecto nesciunt, necessitatibus incidunt dolores, ex cumque voluptatum facere earum expedita iure dolor omnis voluptate consequatur repellendus nisi reiciendis. Aperiam, commodi dolorem. Cum eligendi at dolorem iste, dolores delectus. Laboriosam, amet eligendi itaque delectus reprehenderit tempora sequi illo molestias totam doloribus rem laborum quas maxime quos error cum, nostrum in similique omnis veniam laudantium odit? Animi non ratione blanditiis distinctio suscipit quibusdam fuga, ab ducimus reprehenderit nobis possimus cupiditate iste earum cum tempore sint minus sequi ipsum. Iusto vel enim soluta aliquid facere sed, sint optio eos repellendus mollitia aperiam iure assumenda illo veniam saepe deleniti dolore.
</div>
If you set your #sidenav and #main to be height:80vh(viewport height) and your #topnav to be height:20vh(you can change this to what ever you like), then it will span the rest of your page.
Also, i have amended your HTML/CSS slightly to include display:flex, so that you dont have to add margin-left to your #main.
Try this:
html,
body {
margin: 0;
padding: 0;
}
#topnav {
background-color: #00FF00;
width: 100%;
height: 100px;
border-bottom: 2px solid black;
}
.content {
display: flex;
height: calc(100vh - 102px);
}
#sidenav {
background-color: #FFFF00;
border-right: 1px solid black;
width: 25%;
overflow-y: scroll;
}
#main {
background-color: #FF00FF;
width: 75%;
overflow-y: scroll;
}
<div id="topnav">
<span>Top Navigator</span>
</div>
<div class="content">
<div id="sidenav">
<span>Side Navigator</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum felis vitae venenatis rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer tincidunt egestas ipsum, eu suscipit arcu condimentum
quis. Donec vestibulum leo et turpis lobortis mattis nec quis velit. Etiam a libero cursus, placerat sem eget, pulvinar diam. Nullam commodo tortor nulla, vel eleifend est semper non. Morbi sit amet sapien lectus. Pellentesque mattis ultrices velit
sit amet eleifend. Sed dignissim euismod nulla ut tincidunt. Nulla placerat enim libero, non aliquet purus dignissim sed. Mauris pharetra, mi non tincidunt feugiat, lectus tellus consectetur sapien, eu pharetra elit tellus et tellus. Nulla facilisi.
Duis sapien metus, interdum in porttitor at, vehicula quis felis. Nullam aliquet eget eros quis rutrum. Nunc vitae nulla interdum, viverra ante id, elementum ex. Integer aliquet nisl eget eros mattis, vel porta lorem hendrerit. Fusce ante ligula,
tincidunt ac iaculis nec, interdum eu purus. Mauris id sagittis urna. Ut id erat dui. Sed sit amet venenatis dolor. Pellentesque faucibus ex a leo feugiat, eu faucibus sem dapibus. Nullam ornare ex nec nisi vestibulum, et pellentesque purus bibendum.
Curabitur eu feugiat urna, nec tempor tellus. Fusce tempus mi ut tristique aliquet. Ut vitae augue a magna lacinia suscipit. Phasellus pulvinar facilisis ultricies. Nullam ultrices, tortor in efficitur consequat, ipsum urna gravida nisi, at tincidunt
eros ante id urna. Phasellus euismod porttitor lectus, id tincidunt neque facilisis in. Praesent condimentum rutrum porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
</div>
<div id="main">
<span>Main Area</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum felis vitae venenatis rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer tincidunt egestas ipsum, eu suscipit arcu condimentum
quis. Donec vestibulum leo et turpis lobortis mattis nec quis velit. Etiam a libero cursus, placerat sem eget, pulvinar diam. Nullam commodo tortor nulla, vel eleifend est semper non. Morbi sit amet sapien lectus. Pellentesque mattis ultrices velit
sit amet eleifend. Sed dignissim euismod nulla ut tincidunt. Nulla placerat enim libero, non aliquet purus dignissim sed. Mauris pharetra, mi non tincidunt feugiat, lectus tellus consectetur sapien, eu pharetra elit tellus et tellus. Nulla facilisi.
Duis sapien metus, interdum in porttitor at, vehicula quis felis. Nullam aliquet eget eros quis rutrum. Nunc vitae nulla interdum, viverra ante id, elementum ex. Integer aliquet nisl eget eros mattis, vel porta lorem hendrerit. Fusce ante ligula,
tincidunt ac iaculis nec, interdum eu purus. Mauris id sagittis urna. Ut id erat dui. Sed sit amet venenatis dolor. Pellentesque faucibus ex a leo feugiat, eu faucibus sem dapibus. Nullam ornare ex nec nisi vestibulum, et pellentesque purus bibendum.
Curabitur eu feugiat urna, nec tempor tellus. Fusce tempus mi ut tristique aliquet. Ut vitae augue a magna lacinia suscipit. Phasellus pulvinar facilisis ultricies. Nullam ultrices, tortor in efficitur consequat, ipsum urna gravida nisi, at tincidunt
eros ante id urna. Phasellus euismod porttitor lectus, id tincidunt neque facilisis in. Praesent condimentum rutrum porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
</div>
</div>
I tried another way.
const topnav_height = document.querySelector("#topnav").offsetHeight;
const parent = document.querySelector(".parent");
parent.style.height = "calc(100% - " + topnav_height + "px)";
html, body {
margin: 0;
padding: 0;
height:100%;
}
* {
box-sizing:border-box;
}
#topnav {
background-color: #00FF00;
border-bottom: 2px solid black;
width:100%;
}
.parent {
display:flex;
height:100%;
}
#sidenav {
background-color: #FFFF00;
border-right: 1px solid black;
height: 100%;
overflow: scroll;
padding: 8px;
flex:1;
}
#main {
background-color: #FF00FF;
height: 100%;
padding: 8px;
word-break: break-word;
flex:2;
}
<div id="topnav">
<span>Top Navigator</span>
</div>
<div class="parent">
<div id="sidenav">
<span>Side Navigator</span>
</div>
<div id="main">
<span>Main Area</span>
</div>
</div>
I need a 4px thick solid border around my web page. 30px in from the edge. It needs to be responsive so if the website scrolls the border should always be 30px in from the edge of the PAGE not the VIEWPORT.
I'm trying to use div's positioned absolutely 30px in around the page with a 4px border. But this doesn't work for the footer as it doesn't stay at the bottom of the content when the page scrolls. Sometime the content won't fill the viewport so I can just have a border around the main content.
#main {
width: 70%;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
margin-bottom: 50px;
}
#content2 {
background: #232C44;
color: white;
padding: 30px;
}
#b1 {
position: absolute;
left: 30px;
border-right: 4px solid #916E00;
top: 30px;
bottom: 30px;
}
#b2 {
position: absolute;
left: 30px;
border-bottom: 4px solid #916E00;
right: 30px;
top: 30px;
}
#b3 {
position: absolute;
top: 30px;
bottom: 30px;
border-left: 4px solid #916E00;
right: 30px;
}
#b4 {
position: absolute;
left: 30px;
border-top: 4px solid #916E00;
right: 30px;
bottom: 30px;
}
<div id="b1"></div>
<div id="b2"></div>
<div id="b3"></div>
<div id="b4"></div>
<div id="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non pretium ipsum. Morbi sagittis eu odio at laoreet. Nullam aliquam porttitor pretium. Mauris at nunc nec tortor hendrerit euismod pharetra at dolor. In placerat, lectus vitae semper ultrices,
mi dui gravida nisi, sit amet posuere metus dui quis leo. Mauris euismod, diam sed faucibus ullamcorper, urna magna tempus dolor, nec congue nulla dui nec tellus. Nullam dictum vestibulum est, id gravida nisi aliquet nec. Integer facilisis, nibh sed
viverra volutpat, mi enim convallis tortor, eu tincidunt metus magna eget elit. Ut at magna quam. Duis vel lorem nec lectus rutrum auctor. Vivamus vitae rutrum mi, id mattis eros. In hac habitasse platea dictumst. uis, blandit eros. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam feugiat augue purus, ut sollicitudin nibh egestas dapibus. Morbi vel nisl a magna aliquam mollis.
</div>
PART 2
Ok so we have some answers. I'd like to take this to a second stage which I need for my design.
I need two sections to the page TOP and BOTTOM. The colour of these bleeds past the border. How do I create this to the same spec as the first part of the question.
This is how it should look:
This is how it currently looks:
Don't worry about the width and height. How do I make all the top white and the bottom blue. Whilst still making it responsive. The bottom border always the same distance from the PAGE edge (no the viewport)? Even when the page needs to scroll.
I recommend adding the border to the body element. Please check the following
html, body {
min-height: calc(100vh - 68px);
}
body {
border: 4px solid #916E00;
margin: 30px;
}
#main {
padding: 0 10%;
}
<div id="main">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum accusamus possimus dolore iste aspernatur soluta quia ipsam perferendis magni, voluptatum libero ratione dignissimos cumque magnam rem quasi, at, explicabo eius?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt inventore libero illo laborum soluta modi nesciunt, iste minus, animi aliquid dolor, atque cumque vero fugiat hic amet ipsa exercitationem eum?</p>
<p>Cumque ab libero voluptatem iste. Adipisci omnis a est mollitia neque perspiciatis excepturi incidunt unde, eius tempora vel? Commodi voluptate minima numquam, aliquid veritatis laborum velit rerum cupiditate accusamus repudiandae!</p>
<p>Harum ab voluptate, id dolor autem minima nesciunt sunt aut in! Impedit in illum velit eligendi accusamus nostrum numquam maxime est, molestiae odit nam! Omnis illum ipsum reiciendis eligendi deserunt.</p>
<p>Tempora enim nisi cupiditate perferendis asperiores placeat incidunt iste neque hic aliquid quos aperiam, sint amet! Quaerat nisi mollitia, officiis quis voluptate dignissimos cumque illum, explicabo, velit consequuntur quos nobis.</p>
<p>Quas sed perferendis recusandae nesciunt asperiores nulla, eius dolores quisquam, blanditiis eaque ab illum perspiciatis ut. Reiciendis, at sunt explicabo esse dolores praesentium, unde maiores quibusdam porro perspiciatis repellendus fugit?</p>
<p>Et inventore a itaque recusandae nostrum sed, quod, quae ab, vero accusamus nihil esse explicabo fuga illum quas? Iure ducimus iusto totam consequuntur, accusamus illum optio nesciunt ipsam ipsa deleniti.</p>
</div>
This will keep the border aligned to the bottom of page if there isn't sufficient content to fill the viewport.
PART 2 solutions, using JS - comments included within snippet
var bottomMarginOffset = 90; //adjust as needed
function onResize() {
$('.row2').css('margin-top', $('.row1').height() + bottomMarginOffset + 'px');
}
$(function() {
// call resize on page load to set initial value
onResize();
});
$(window).resize(onResize)
* {
box-sizing: boder-box;
}
body {
background-color: #00b3ff;
padding: 0;
margin: 0;
}
#main {
min-height: calc(100vh - 68px);
border: 4px solid #916E00;
position: relative;
padding: 0;
margin: 30px;
}
/*
Set top row to absolute and offset it (margin + border width) so that it sits outside its container.
Recommend using some CSS vars to set and calculate the values.
*/
.row:nth-child(1) {
position: absolute;
top: 0;
left: 0;
right: -34px; /* stretch it outside on right side */
z-index: -1; /* stack under parent so the border stays on top */
margin-left: -34px; /* pull left */
margin-top: -34px; /* pull up */
padding: 64px 64px 34px; /* add padding so that content is aligned with the rest of the child elements */
}
.row:nth-child(2) {
padding: 30px;
}
.row:nth-child(odd) {
background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div class="row row1"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae doloremque quaerat commodi consectetur quisquam similique, dignissimos tenetur, modi porro, cum voluptas expedita neque nisi dolorem sequi sed beatae? Repellendus, alias?</p>
<p>A ut nam quidem nobis obcaecati fuga sunt. Recusandae perspiciatis repellat vero? Nostrum, architecto commodi. Officiis quos cum dolore error enim adipisci deserunt, blanditiis autem fugiat laboriosam suscipit laborum hic!</p>
</div>
<div class="row row2"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, officia sequi facilis exercitationem vero error voluptatibus libero magnam ducimus explicabo commodi quos itaque quas consequatur dolores veniam nam excepturi autem.</p>
<p>Officiis ipsa quod dolores temporibus at porro corporis aut natus distinctio suscipit esse, nam soluta veniam earum quaerat laborum ab voluptatem voluptatibus laboriosam repellat quis. Labore aliquid illum cumque assumenda.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa odit non unde nesciunt illo qui dolorum autem ad minus quisquam nemo rem tenetur vero velit ab in, veritatis recusandae voluptatum?</p>
<p>Optio sunt inventore accusantium accusamus, eaque at voluptate libero fugit, ipsum impedit, modi labore autem molestiae. Porro tempora, corrupti, quo veritatis laudantium illum veniam nulla illo in quasi facere dolore?</p>
<p>Expedita exercitationem ipsam explicabo similique est omnis reiciendis. Natus non similique veritatis, reprehenderit, sed delectus quo at molestiae expedita placeat quis accusamus iure? Soluta natus vel asperiores dignissimos, laboriosam expedita!</p>
<p>Tempora doloribus neque dolores odio temporibus laboriosam nostrum, reiciendis suscipit provident cum officiis eaque culpa, quam est molestias minus enim harum adipisci autem expedita, laudantium quisquam ut nihil. Deserunt, voluptas.</p>
<p>Qui accusantium ut atque esse excepturi praesentium minima quos harum! Voluptas quibusdam alias incidunt similique facilis architecto, qui nulla, quas voluptates laudantium quis modi saepe suscipit. Inventore, aliquid. Minima, dolor.</p>
<p>Quidem, sunt facilis voluptates nihil neque doloremque deserunt? Magnam in adipisci ipsum voluptatem possimus quas mollitia, dicta soluta non magni praesentium ad ea. Dignissimos accusamus quaerat ab est. Magnam, asperiores!</p>
<p>Dolores, quo. Officiis hic adipisci nihil obcaecati voluptates incidunt sit eum dolorem quasi dignissimos vero ullam maxime harum laborum quis ab praesentium corporis quos, tenetur, omnis non ex error doloribus?</p>
<p>Officia, quisquam? Omnis unde reprehenderit, asperiores delectus quibusdam corrupti veniam dignissimos. Sunt natus ut illo aspernatur perspiciatis veritatis? Mollitia, eligendi aliquid. Natus, earum? Ipsam harum consequatur unde aliquid! Necessitatibus,
beatae!</p>
<p>Nostrum sunt quod consectetur debitis quam. Excepturi perspiciatis fugit voluptates corrupti fuga repellendus alias voluptatibus laudantium sed consectetur nam cum nihil in saepe repellat aspernatur accusantium sapiente, labore quae perferendis.</p>
<p>Dolor tenetur voluptate eum, illo qui aut unde vitae quos. Error placeat recusandae, consectetur dolore, facilis iusto distinctio fugit eligendi iure quia ab voluptatem dolor corporis, repellat aliquid laboriosam minus!</p>
<p>Rerum alias aspernatur, quae nostrum, cumque saepe voluptate dolore vitae distinctio veritatis fugiat, necessitatibus laborum! Quod vitae hic, totam consectetur labore ratione natus voluptatem, incidunt voluptatibus mollitia, expedita similique exercitationem!</p>
<p>Ipsum veritatis optio dolorem, sed nihil aliquam reprehenderit culpa provident quam expedita ratione consectetur ipsa beatae explicabo atque amet iure. Voluptatibus praesentium molestiae neque dolor nemo ipsam nesciunt ab sit!</p>
<p>Consequuntur ipsam assumenda quam laudantium ipsa fugit? Ad totam accusamus temporibus sunt eligendi cupiditate excepturi sequi voluptatem recusandae nesciunt laudantium deleniti id, est, nam nihil quidem veniam facilis tenetur adipisci.</p>
<p>Voluptates ipsa voluptatem delectus quis consequuntur expedita vel quod atque minus, temporibus sint inventore repudiandae quas in illum incidunt mollitia officia, fugit quos voluptas repellat suscipit officiis doloremque explicabo? Sequi!</p>
<p>Repellat possimus libero id in ut excepturi qui necessitatibus temporibus doloremque voluptatum autem facilis animi quisquam vel error incidunt eligendi esse, optio nemo consequatur quibusdam hic voluptas modi facere? Unde!</p>
<p>Ut deserunt error, vitae quam itaque dolorem ea quibusdam minima porro facilis id ex aliquid aliquam a distinctio nam, qui adipisci eius deleniti natus impedit atque? Eius labore cumque sequi.</p>
<p>Dolor dolorem ratione ullam repellendus ad vel praesentium obcaecati quisquam reiciendis, non, at natus deleniti velit aliquid magni. Debitis nulla quo minus quisquam nihil sequi aliquid reiciendis amet ratione cupiditate.</p>
<p>Ex et ullam esse, provident nisi fugiat autem unde sunt minima, ratione recusandae expedita possimus, fuga ut sit eius asperiores eveniet incidunt quae iure? Eaque cum fugit temporibus impedit exercitationem.</p>
<p>Nemo recusandae ratione reprehenderit labore cumque laborum placeat eius unde impedit modi maxime beatae vero eveniet repellat, quae non quisquam, sapiente ea laudantium eos iure blanditiis deserunt consequuntur. Modi, sed.</p>
<p>Sunt ab libero fugiat nisi dolor tenetur perferendis eaque sapiente aperiam sit iste corporis, voluptatem, saepe modi possimus quae necessitatibus velit quas at. Corrupti voluptates libero, repellendus magnam repudiandae illum?</p>
</div>
</div>
Note one caveat with this solution is that the text in top row won't be selectable (due to stacking order). Bad for usability and accessibility. You can work around this by placing the text in a separate container and positioning accordingly. I'll leave that up to you to explore.
I think you're making it too complicated! Try this?
<div style="margin: 30px; border: 4px solid red;">
<p style="max-width: 700px; margin: 0 auto; padding: 30px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div>
https://codepen.io/scottmledbetter/pen/MXVmbP
I believe this is what you want:
index.html
<div class="b one"></div>
<div class="b two"></div>
<div class="b three"></div>
<div class="b four"></div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non pretium ipsum. Morbi sagittis eu odio at laoreet. Nullam aliquam porttitor pretium. Mauris at nunc nec tortor hendrerit euismod pharetra at dolor. In placerat, lectus vitae semper ultrices,
mi dui gravida nisi, sit amet posuere metus dui quis leo. Mauris euismod, diam sed faucibus ullamcorper, urna magna tempus dolor, nec congue nulla dui nec tellus. Nullam dictum vestibulum est, id gravida nisi aliquet nec. Integer facilisis, nibh sed
viverra volutpat, mi enim convallis tortor, eu tincidunt metus magna eget elit. Ut at magna quam. Duis vel lorem nec lectus rutrum auctor. Vivamus vitae rutrum mi, id mattis eros. In hac habitasse platea dictumst. uis, blandit eros. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam feugiat augue purus, ut sollicitudin nibh egestas dapibus. Morbi vel nisl a magna aliquam mollis.
</div>
main.css
.main {
box-sizing: border-box;
padding: 2rem;
margin: 2rem;
}
.b {
position: fixed;
background: slateblue;
width: 30px;
height: 100%;
}
.two {
right: 0;
}
.three, .four {
width: 100%;
height: 30px;
}
.three {
top: 0;
}
.four {
bottom: 0;
}
Working pen: https://codepen.io/manAbl/pen/ZRxejr?editors=1100 ;
I believe you can also implement what you want using :before & :after pseudo-classes so you would use the body tag and just one more extra div to wrap your content. Using both pseudo-classes in the body and the extra div (Hopefully you can easily figure it out for yourself from here ...)
Hope helps :)
So I am pretty sure this is what you are looking for, but it was a little bit difficult to understand exactly what you meant.
Here is a JSFiddle of what I did.
Basically, you need another wrapper div for this to work. Putting the padding: 30px on the main keeps that border at least 30 pixels from the edge of the screen. Put the border on .content and then add some padding to it and a min-height of 100vh.
In case you haven't used the shorthand on margins, padding, etc., It goes in clockwise, starting from the top. So rather than setting:
.class {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
}
we can just do:
.class {
margin: 5px 10px 5px 10px;
}
You can shorten that further to just margin: 5px 10px; since top/bottom and right/left are the same.