I have created a simple ul using a dash to display the li elements.
Here is the example fiddle:
The li are not aligned properly:
Current li
–Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus
blandit should be alligned to Lorem.
Here is the css code I am using
ul {
list-style-type: none;
padding: 0;
margin-bottom: 15px;
}
li {
padding-left: 10px;
padding-bottom: 0.1em;
text-indent: -.5em;
}
li:before {
content: "– ";
color: #333;
}
You can use padding on the li and absolute positioning for the dash (and remove the text indent):
ul {
list-style-type: none;
padding: 0;
margin-bottom: 15px;
}
li {
padding-left: 1.2em; /* amount of space for the dash */
padding-bottom: 0.1em;
position: relative;
}
li:before {
content: "–";
color: #333;
position: absolute;
left: 0;
top: 0;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
</ul>
You should make li padding-left = text-indent.
For example:
{
padding-left: .5em;
padding-bottom: 0.1em;
text-indent: -.5em;
}
or make them 10px as u want
ul {
list-style-type: none;
padding:0;
margin-bottom: 15px;
}
li {
padding-left: 10px;
padding-bottom: 0.1em;
text-indent: -10px;
}
li:before {
content: "– ";
color: #333;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
</ul>
Apply position: absolute to li::before will do the trick
ul {
list-style-type: none;
padding-left: 10px;
margin-bottom: 15px;
}
li {
padding-left: 10px;
padding-bottom: 0.1em;
/*text-indent: -.5em;*/
}
li:before {
content: "– ";
position: absolute;
left: 10px;
color: #333;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
</ul>
Related
I need some help.
There are a few containers that have text inside. Obviously there is a lot of text, so there have to be scroll. But I don't want text look like it's cut, I want to "blur" the bottom of the single container.
Here are the results: https://jsfiddle.net/rsze93wk/3/
Well, it looks... pretty shitty in my opinion. The bottom of the container should be almost invisible, but I can clearly read it. I used :after and display: block to make this effect, so I'm unable to select the text under that pseudo-element.
There is also a problem, gradient stays in one place when I scroll down. Can you help me solve this? Also, maybe you have any ideas how to make this effect look much better?
Update: the first snippet seems to be buggy on Chrome but works fine on Firefox
You can try to color the text using gradient like below:
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0;
height: 100vh;
}
.container {
padding: 20px;
border: 1px solid black;
}
.main:not(:first-child) {
margin-top: 20px;
}
.main {
width: 200px;
height: 200px;
box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.75);
overflow: auto;
text-align: center;
background: linear-gradient(#000 calc(100% - 50px),white);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
<div class="container">
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>
</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>
</div>
</div>
Another alternative using sticky:
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0;
height: 100vh;
}
.container {
padding: 20px;
border: 1px solid black;
}
.main:not(:first-child) {
margin-top: 20px;
}
.main {
width: 200px;
height: 200px;
box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.75);
overflow: auto;
text-align: center;
}
.main::after {
content:"";
display:block;
height:200px;
margin-top:-200px;
position:sticky;
bottom:0;
background: linear-gradient(transparent calc(100% - 50px),white);
pointer-events:none;
}
<div class="container">
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>
</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>
</div>
</div>
And if you want a real blur effect use backdrop-filter:
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0;
height: 100vh;
}
.container {
padding: 20px;
border: 1px solid black;
}
.main:not(:first-child) {
margin-top: 20px;
}
.main {
width: 200px;
height: 200px;
box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.75);
overflow: auto;
text-align: center;
}
.main::after {
content:"";
display:block;
height:20px;
margin-top:20px;
position:sticky;
bottom:0;
pointer-events:none;
-webkit-backdrop-filter:blur(5px);
backdrop-filter:blur(5px);
}
<div class="container">
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>
</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>
</div>
</div>
I want to "blur" the bottom of the single container.
Blur is CSS filter (filter: blur(1)) and you can't use it here with the after:: pseudoelement because content of that element is empty.
I used :after and display: block to make this effect, so I'm unable to select the text under that pseudo-element.
This is a good and common solution. To make text bellow the after:: clickable you can add pointer-events: none; to the after::.
There is also a problem, gradient stays in one place when I scroll down.
after:: should be positioned to the .main and in the .main you should have another container with scroll.
I am creating a fiction ebook using plain html as the source files for the chapters of the book. I would like to keep the html as vanilla as possible and use CSS for the formatting. Most of the book just needs an indent for any paragraph following a paragraph and every <hr /> tag should display as a scene break, e.g. 3 * center-aligned.
This all works fine in JSFiddle and in chrome.
p {
margin: 0rem;
text-indent: 0rem;
}
p + p {
text-indent: 1.5rem;
}
hr {
visibility: hidden;
text-align: center;
overflow: visible;
margin-top: 2em;
margin-bottom: 2em;
}
hr::after {
visibility: visible;
content: "* * *";
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>
but when I copy this to the Amazon ebook preview app I need this extra redundant looking CSS for the ***'s to appear ?
p::after {
content: " "
}
Can anyone help identify why this might be needed in the ebook ? I don't want to have to tag a useless space on to the end of every paragraph to make this work. Thanks in advance.
I would avoid the visibility: visible vs. hidden combination in the hr and its pseudo element: You can simply apply border: none; to the hr to avoid the display of the horizontal line itself. This might also help with your other problem.
p {
margin: 0rem;
text-indent: 0rem;
}
p + p {
text-indent: 1.5rem;
}
hr {
text-align: center;
border: none;
margin-top: 2em;
margin-bottom: 2em;
}
hr::after {
content: "* * *";
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>
There is a line gap between first line to second line. How to remove it?
ol {
color: #fff;
list-style-type: decimal;
background: #152a40;
width: 100%;
margin: 50px auto;
padding: 1.2em 30px 1.2em 75px;
line-height: 0;
}
ol li {
position: relative;
font: bold italic 45px/1.5 Helvetica, Verdana, sans-serif;
margin-bottom: 2px;
}
li p {
font: 15px/1.5 Helvetica, sans-serif;
padding-left: 60px;
color: #eaeaea;
}
<ol>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa
viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis. </p>
</li>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p>
</li>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p>
</li>
</ol>
The issue originates from the fact that the list item's counter is actually part of the DOM node: therefore, increasing it's font size and therefore its line-height will actually influence how the first line looks like.
For a fool-proof setup, you will want to isolate the counter from the actual <li> content. In order to do this, we can use CSS counters.
Declare a custom counter (let's name it listCounter) on the parent element (<ol> in this case), so that it is reset for each occurrence, e.g. counter-reset: listCounter.
Increment the counter in the nested <li> elements, using: counter-increment: listCounter;. Also, since we are using custom counters, disable the default counter using list-style: none.
Use ::before pseudo-element on the <li> element to display our custom counter, using content: counter(listCounter).
Here is a proof-of-concept example:
ol {
color: #fff;
list-style-type: decimal;
background: #152a40;
width: 100%;
margin: 50px auto;
padding: 1.2em 30px 1.2em 75px;
line-height: 0;
/* Reset counter */
counter-reset: listCounter;
}
ol li {
position: relative;
margin-bottom: 2px;
/* Increment counter by 1 in each <li> */
counter-increment: listCounter;
/* Hide default bullets/list counter */
list-style: none;
/*
* Top padding to accommodate tall list counter
* This value is a trial and error value, used to align baselines of counter and paragraph's first line
*/
padding-top: 18px;
}
ol li::before {
/* Set pseudo-element's content as counter */
content: counter(listCounter) ".";
font: bold italic 45px/1.5 Helvetica, Verdana, sans-serif;
/* Positioning, you decide how you want it to look */
position: absolute;
left: -10px;
top: 0;
}
li p {
font: 15px/1.5 Helvetica, sans-serif;
padding-left: 60px;
color: #eaeaea;
}
<ol>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa
viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis. </p>
</li>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p>
</li>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p>
</li>
</ol>
The first line has a larger line height because of the large number in the list. You can resolve this issue by adding line-height: 1; to the ol li
ol li {
position: relative;
font: bold italic 45px/1.5 Helvetica, Verdana, sans-serif;
margin-bottom: 2px;
line-height: 1;
}
It appears the issue is with the font-size/line-height between the li and the p. Set the line-height for the li and p to a closer value, or 1 for the li, and use margin to separate the li items.
ol {
color: #fff;
list-style-type: decimal;
background: #152a40;
width: 100%;
margin: 50px auto;
padding: 1.2em 30px 1.2em 75px;
line-height: 0;
}
ol li {
position: relative;
font: bold italic 45px/1 Helvetica, Verdana, sans-serif;
margin-bottom: 40px;
}
li p {
font: 15px/1.5 Helvetica, sans-serif;
padding-left: 60px;
color: #eaeaea;
}
<ol>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis. </p>
</li>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p>
</li>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p>
</li>
</ol>
Basically:
I have a wrapper div that is 100% width and height.
Inside it is another div that is absolutely positioned and must follow the window height (with a little bit of margin at the bottom).
Inside this div is a ul list that will be always as high as the parent div. If it gets higher, it will become scrollable.
This is what I'd like to achieve:
.wrapper-location {
position: relative;
height: 100vh;
width: 100%;
background: #CCC;
overflow: auto;
}
.box-locator {
background: #f9f9f9;
position: absolute;
right: 50px;
top: 50px;
width: 360px;
border-radius: 5px;
overflow: hidden;
padding: 0;
box-shadow: 0 0 5px #888;
z-index: 99999999;
}
.box-locator-listing {
margin-left: 0;
overflow-y: auto;
height: 500px;
}
.box-locator-listing-item {
border-bottom: 1px solid #ccc;
list-style: outside none none;
padding: 10px;
position: relative;
background-size: 50px 50px;
}
<div class="wrapper-location">
<div class="box-locator">
<ul class="box-locator-listing">
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
</ul>
</div>
</div>
http://codepen.io/aguerrero/pen/ygrwPr
I've been pulling my hair and can't seem to make it work.
Is this what you are looking for. It can be done by adding height 100% to .wrapper-loctaion and height 90% to .box locator (add height 100% to html,body too). Now set top and bottom to 5% for .box-locator to center it vertically.
html,
body {
height: 100%;
}
.wrapper-location {
position: relative;
height: 100%;
width: 100%;
background: #CCC;
overflow: auto;
}
.box-locator {
background: #f9f9f9;
position: absolute;
right: 50px;
top: 5%;
bottom: 5%;
width: 360px;
height: 90%;
border-radius: 5px;
overflow: hidden;
padding: 0;
box-shadow: 0 0 5px #888;
z-index: 99999999;
}
.box-locator-listing {
margin-left: 0;
overflow-y: auto;
height: 500px;
}
.box-locator-listing-item {
border-bottom: 1px solid #ccc;
list-style: outside none none;
padding: 10px;
position: relative;
background-size: 50px 50px;
}
<div class="wrapper-location">
<div class="box-locator">
<ul class="box-locator-listing">
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
<li class="box-locator-listing-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta at sem sit amet semper. Mauris vitae diam gravida, ultrices lacus sit amet, aliquam tortor.</li>
</ul>
</div>
</div>
Add margin-bottom:50px i.e, equal to top:50px
.box-locator {
background: #f9f9f9;
position: absolute;
right: 50px;
top: 50px;
width: 360px;
border-radius: 5px;
overflow: hidden;
padding: 0;
box-shadow: 0 0 5px #888;
z-index: 99999999;
margin-bottom: 50px; //new property
}
I am experimenting a bit with calc on css to define some external space (like an external margin)
For example in this 3 column layout, the resulting width of the central column is a bit diferent than the other two, but I can not figure out how to make the text the same width.
There are some requirements I need.
I need to use only padding, not margin.
I can not add padding to the container C3 in this case.
I want to solve it using the logic under calc. I don't know if the percentages are applied first, or I need to define the paddings first to the computer later solve the percentages...
I prefer to use the border-box model, because it is solving me a lot of problems on other places of my code... but probably I can sacrifice this one.
body {
margin: 0;
padding 0;
}
* {
box-sizing: border-box;
}
p {
text-align: justify;
}
.C3 {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.C3>div {
width: 33.33%;
padding: 50px;
}
.C3>div:first-child {
background-color: #DFD;
width: calc(33.33% + 140px);
padding-left: 140px;
}
.C3>div:last-child {
background-color: #FEE;
width: calc(33.33% + 140px);
padding-right: 140px;
}
<section class="C3">
<div>
<p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros.Nunc est augue, varius sagittis aliquam a, mollis et sapien. In mollis adipiscing leo non bibendum.</p>
</div>
<div>
<p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros.</p>
</div>
<div>
<p>3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros. Nunc est augue, varius sagittis aliquam a, mollis et sapien. In mollis adipiscing leo non bibendum.</p>
</div>
</section>
Any ideas?
Since you're using box-sizing: border-box, the width already includes the padding. The 140px are being added twice.
width: 33.33% is all that's needed.
4castle answer made me realize that yes, I was repeating something, but i found it that was the 50px.
So in my margin I needed to substract 50px from the calc, and now I have 90px.
The diference is subtle but now I have the exact same column text size.
body {margin: 0; padding 0;}
*{box-sizing: border-box;}
p {
text-align: justify;}
.C3 {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;}
.C3>div {
width: 33.33%;
padding: 50px;}
.C3>div:first-child {
background-color: #DFD;
width: calc(33.33% + 90px);
padding-left: 140px;}
.C3>div:last-child {
background-color: #FEE;
width: calc(33.33% + 90px);
padding-right: 140px;}
<section class="C3">
<div>
<p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros.Nunc est augue, varius sagittis aliquam a, mollis et sapien. In mollis adipiscing leo non bibendum.</p>
</div>
<div>
<p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros.</p>
</div>
<div>
<p>3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros. Nunc est augue, varius sagittis aliquam a, mollis et sapien. In mollis adipiscing leo non bibendum.</p>
</div>
</section>