Related
I want to stack a div over 2 other divs, all 3 with unknown content, so the padding bottom of 1 and padding top of 3 should not be hardcoded. Is there any CSS-only solution for this?
.stacked {
color: #fff
}
.stacked .first,
.stacked .third {
min-height: 100px;
padding: 20px
}
.stacked .first {
background: red;
padding-bottom: 100px
}
.stacked .third {
background: blue;
padding-top: 100px
}
.stacked .second {
margin: 0 auto;
max-width: 50%;
position: relative
}
.stacked .second>div {
background: green;
display: block;
padding: 20px;
position: absolute;
-webkit-transform: translateY(-50%);
transform: translateY(-50%)
}
<div class="stacked">
<div class="first">
Unknown content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi arcu, convallis sed luctus in, volutpat luctus magna. Cras facilisis odio sed sem maximus ullamcorper. Donec laoreet vulputate suscipit. Proin rutrum elit eu dui ultricies
auctor sit amet pharetra tortor. Donec feugiat iaculis ex id cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec viverra dolor eget ligula semper vestibulum. Phasellus dictum nulla quis lectus congue,
sit amet pulvinar neque volutpat. Duis finibus sapien quis lorem suscipit, et luctus erat rutrum. Integer accumsan ipsum nec felis ultrices finibus. Integer at tincidunt orci. In tempus sollicitudin velit, sed dignissim ligula maximus ac.
</div>
<div class="second">
<div>
Unknown content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi arcu, convallis sed luctus in, volutpat luctus magna. Cras facilisis odio sed sem maximus ullamcorper.
</div>
</div>
<div class="third">
Unknown content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi arcu, convallis sed luctus in, volutpat luctus magna. Cras facilisis odio sed sem maximus ullamcorper. Donec laoreet vulputate suscipit. Proin rutrum elit eu dui ultricies
auctor sit amet pharetra tortor. Donec feugiat iaculis ex id cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec viverra dolor eget ligula semper vestibulum. Phasellus dictum nulla quis lectus congue,
sit amet pulvinar neque volutpat. Duis finibus sapien quis lorem suscipit, et luctus erat rutrum. Integer accumsan ipsum nec felis ultrices finibus. Integer at tincidunt orci. In tempus sollicitudin velit, sed dignissim ligula maximus ac.
</div>
</div>
As you want items to be placed with space for their content we cannot have the inner (green) div positioned absolute.
This snippet has the first second and third divs just one below the other as standard. The first and third have their red and blue backgrounds respectively.
The second has a linear-gradient background, half red, half blue.
This snippet uses flex to position the texts centrally within each div but of course you can remove that if required.
.stacked {
color: #fff
}
.stacked .first,
.stacked .third {
min-height: 100px;
padding: 20px;
display: flex;
align-items: center;
}
.stacked .first {
background: red;
}
.stacked .third {
background: blue;
}
.stacked .second {
background-image: linear-gradient(red 0 50%, blue 50% 100%);
display: flex;
align-items: center;
justify-content: center;
}
.stacked .second>div {
max-width: 50%;
background: green;
padding: 20px;
}
<div class="stacked">
<div class="first">
Unknown content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi arcu, convallis sed luctus in, volutpat luctus magna. Cras facilisis odio sed sem maximus ullamcorper. Donec laoreet vulputate suscipit. Proin rutrum elit eu dui ultricies
auctor sit amet pharetra tortor. Donec feugiat iaculis ex id cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec viverra dolor eget ligula semper vestibulum. Phasellus dictum nulla quis lectus congue,
sit amet pulvinar neque volutpat. Duis finibus sapien quis lorem suscipit, et luctus erat rutrum. Integer accumsan ipsum nec felis ultrices finibus. Integer at tincidunt orci. In tempus sollicitudin velit, sed dignissim ligula maximus ac.
</div>
<div class="second">
<div>
Unknown content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi arcu, convallis sed luctus in, volutpat luctus magna. Cras facilisis odio sed sem maximus ullamcorper.
</div>
</div>
<div class="third">
Unknown content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi arcu, convallis sed luctus in, volutpat luctus magna. Cras facilisis odio sed sem maximus ullamcorper. Donec laoreet vulputate suscipit. Proin rutrum elit eu dui ultricies
auctor sit amet pharetra tortor. Donec feugiat iaculis ex id cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec viverra dolor eget ligula semper vestibulum. Phasellus dictum nulla quis lectus congue,
sit amet pulvinar neque volutpat. Duis finibus sapien quis lorem suscipit, et luctus erat rutrum. Integer accumsan ipsum nec felis ultrices finibus. Integer at tincidunt orci. In tempus sollicitudin velit, sed dignissim ligula maximus ac.
</div>
</div>
I have 3 div, 2 are floating left and the other floating right. However it is not aligning in the way I want.
.numb1, .numb2 {
float: left;
width: 60%;
display: inline-block;
}
.numb3, .numb4 {
float: right;
width: 35%;
display: inline-block;
}
Here is a snippet so you have an idea of what problem; https://jsfiddle.net/rnty32gt/
I want the class numb3 to be aligned with numb1. I tried to use inlineblock but it is not working. Sorry for my English.
Make this way using this css and html
.numb2 ,.numb3 {
padding: 0;
text-align: left;
border: 1px solid #c4c4c4;
margin: 5px 0;
background: linear-gradient(180deg,#fff 0,#e6e6e6);
}
.numb1 {
float: left;
width: 60%;
}
.numb3 {
float: right;
width: 35%;
}
<!DOCTYPE html>
<html>
<body>
<h1>The float Property</h1>
<div class="numb1">
<div class="numb2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.
</div><div class="numb2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.
</div></div><div class="numb3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>
</body>
</html>
This is how you could do it to have it fixed as you wish. But you could also use flex-box. Here is some info about flex-box: https://www.w3schools.com/css/css3_flexbox.asp
div {
padding: 0;
text-align: left;
border: 1px solid #c4c4c4;
margin: 5px 0;
background: linear-gradient(180deg,#fff 0,#e6e6e6);
}
.numb1, .numb2 {
float: left;
width: 60%;
}
.numb3 {
float: right;
width: 35%;
}
<h1>The float Property</h1>
<div class="numb1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.
</div>
<div class="numb3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>
<div class="numb2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.
</div>
So as you can see i have changed the order of div2 and div3 in your HTML.
There you go.
div {
padding: 0;
text-align: left;
border: 1px solid #c4c4c4;
margin: 5px 0;
background: linear-gradient(180deg,#fff 0,#e6e6e6);
}
.wrap-l
{
margin:0px;
float: left;
width: 60%;
border:none;
}
.numb1, .numb2 {
}
.numb3 {
float: right;
width: 35%;
}
<div class="wrap-l">
<div class="numb1">
Text 1
</div>
<div class="numb2">
Text 2
</div>
</div>
<div class="numb3">
Text 3
</div>
give width: 30%; for numb1 and numb 2
If you want to use floats, just put the .numb3 above the other divs in your markup : https://jsfiddle.net/5vbvjwcs/
Otherwise you can use flex :
section {
display: flex;
}
.leftColumn {
width: 60%;
}
.content {
padding: 10px;
background-color: #eaeaea;
margin: 10px;
flex: 1;
}
<section>
<div class="leftColumn">
<div class="content">
Numb1
</div>
<div class="content">
Numb2
</div>
</div>
<div class="content">
Numb3
</div>
</section>
Doe,
If you want div.numb3 align with div.numb1 you should change the order like this:
div {
padding: 0;
text-align: left;
border: 1px solid #c4c4c4;
margin: 5px 0;
background: linear-gradient(180deg,#fff 0,#e6e6e6);
}
.numb1, .numb2 {
float: left;
width: 60%;
}
.numb3 {
float: right;
width: 35%;
}
<!DOCTYPE html>
<html>
<body>
<h1>The float Property</h1>
<div class="numb1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.
</div>
<div class="numb3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>
<div class="numb2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.
</div>
</body>
</html>
I have a simple ordered list that has some list items and within those may be a sub list. I want to increment the number of the list item to the child / sub ordered lists so the layout is like so:
1. Blah blah blah
2. Yeah yeah yeah
3. Jadda jadda jadda
3.1 Sub jadda
3.2 Sub Jadda
This isn't so hard to do, my code does this (have a look at the code snippet)...
.container {
background-color: #c7e8f7;
border: 1px solid #00bcd4;
width:800px;
padding: 5px;
}
ol {
counter-reset: item;
list-style-type: none;
padding-left: 0px;
}
li:before {
content: counters(item, ".") ".";
counter-increment: item;
}
/* Add an indent to the sub ol*/
ol ol {
padding-left: 10px;
}
<div class="container">
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis, interdum libero non, tincidunt dolor. Quisque vestibulum vitae augue eu tempus. Suspendisse nec enim mollis, auctor mi vitae, tincidunt lectus. Nullam interdum nisi at elit pretium, in tempus elit pharetra. Etiam posuere tempor sapien. Mauris pretium augue sapien, id vestibulum elit scelerisque a. Sed condimentum ligula mauris, in posuere metus ultricies eu. Quisque ac sem ut mauris finibus porta. Etiam sit amet aliquam odio, eu interdum tortor. Etiam ac porttitor nunc, quis elementum diam. Morbi nec vestibulum quam. Proin ultricies tempus tellus sit amet ultrices. Cras quam dolor, vestibulum non quam ut, rutrum tincidunt augue. Vestibulum et nisl elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis, interdum libero non, tincidunt dolor. Quisque vestibulum vitae augue eu tempus. Suspendisse nec enim mollis, auctor mi vitae, tincidunt lectus. Nullam interdum nisi at elit pretium, in tempus elit pharetra. Etiam posuere tempor sapien. Mauris pretium augue sapien, id vestibulum elit scelerisque a. Sed condimentum ligula mauris, in posuere metus ultricies eu. Quisque ac sem ut mauris finibus porta. Etiam sit amet aliquam odio, eu interdum tortor. Etiam ac porttitor nunc, quis elementum diam. Morbi nec vestibulum quam. Proin ultricies tempus tellus sit amet ultrices. Cras quam dolor, vestibulum non quam ut, rutrum tincidunt augue. Vestibulum et nisl elit.</li>
<li> here is some text...
<ol>
<li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li>
<li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li>
<li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li>
<li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li>
</ol>
</li>
</ol>
</div>
Now the problem is that my text wraps under the list item number, I don't want this, I want the number to have a column (like it would be if I wasn't using the :before to set the increment number). My uploaded image shows how the content wraps below the number. Does anyone know of a way without modifying the HTML structure (CSS only) to prevent the wrap?
Please note, if I haven't described my problem clearly please say so and I shall reword the question - many thanks.
This can be done by making use of display: table property on the list. Then apply display: table-cell on li:before in order to provide indent on the second line and so on. display: table-row on li in order to have li text in the same row as the table-cell.
Additions to CSS
ol{
display: table;
}
li:before {
display: table-cell;
}
li {
display: table-row;
// Add spacing to left as per requirement.
}
SNIPPET
.container {
background-color: #c7e8f7;
border: 1px solid #00bcd4;
width: 800px;
padding: 5px;
}
ol {
counter-reset: item;
list-style-type: none;
padding-left: 0px;
display: table;
}
li {
display: table-row;
}
li:before {
content: counters(item, ".") ".";
counter-increment: item;
display: table-cell;
}
/* Add an indent to the sub ol*/
ol ol {
padding-left: 10px;
}
<div class="container">
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis, interdum libero non, tincidunt dolor. Quisque vestibulum vitae augue eu tempus. Suspendisse nec enim mollis, auctor mi vitae, tincidunt lectus. Nullam interdum nisi at elit pretium, in tempus elit pharetra. Etiam posuere tempor sapien. Mauris pretium augue sapien, id vestibulum elit scelerisque a. Sed condimentum ligula mauris, in posuere metus ultricies eu. Quisque ac sem ut mauris finibus porta. Etiam sit amet aliquam odio, eu interdum tortor. Etiam ac porttitor nunc, quis elementum diam. Morbi nec vestibulum quam. Proin ultricies tempus tellus sit amet ultrices. Cras quam dolor, vestibulum non quam ut, rutrum tincidunt augue. Vestibulum et nisl elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis, interdum libero non, tincidunt dolor. Quisque vestibulum vitae augue eu tempus. Suspendisse nec enim mollis, auctor mi vitae, tincidunt lectus. Nullam interdum nisi at elit pretium, in tempus elit pharetra. Etiam posuere tempor sapien. Mauris pretium augue sapien, id vestibulum elit scelerisque a. Sed condimentum ligula mauris, in posuere metus ultricies eu. Quisque ac sem ut mauris finibus porta. Etiam sit amet aliquam odio, eu interdum tortor. Etiam ac porttitor nunc, quis elementum diam. Morbi nec vestibulum quam. Proin ultricies tempus tellus sit amet ultrices. Cras quam dolor, vestibulum non quam ut, rutrum tincidunt augue. Vestibulum et nisl elit.</li>
<li> here is some text...
<ol>
<li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li>
<li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li>
<li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li>
<li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li>
</ol>
</li>
</ol>
</div>
One approach is to provide a specific padding to the left of the <li> elements, and then position the generated ::before pseudo-element in that space:
/* This block is just to remove default padding
and margin, and also to more easily assign
width/height to elements: */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
background-color: #c7e8f7;
border: 1px solid #00bcd4;
width: 800px;
padding: 5px;
}
ol {
counter-reset: item;
list-style-type: none;
}
li {
/* padding the left of the <li>
elements with 2em of 'empty space': */
padding-left: 2em;
/* setting the position to a non-'static'
value, in order to position the
pseudo-elements in relation to their
closest <li>: */
position: relative;
}
li:before {
content: counters(item, ".")".";
counter-increment: item;
/* absolute positioning to remove the
pseudo-element from the document
flow, and to explicitly move them
to the left-most edge: */
position: absolute;
left: 0;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
background-color: #c7e8f7;
border: 1px solid #00bcd4;
width: 800px;
padding: 5px;
}
ol {
counter-reset: item;
list-style-type: none;
padding-left: 0px;
}
li {
padding-left: 2em;
position: relative;
}
li:before {
content: counters(item, ".")".";
counter-increment: item;
position: absolute;
left: 0;
}
<div class="container">
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis, interdum libero non, tincidunt dolor. Quisque vestibulum vitae augue
eu tempus. Suspendisse nec enim mollis, auctor mi vitae, tincidunt lectus. Nullam interdum nisi at elit pretium, in tempus elit pharetra. Etiam posuere tempor sapien. Mauris pretium augue sapien, id vestibulum elit scelerisque a. Sed condimentum
ligula mauris, in posuere metus ultricies eu. Quisque ac sem ut mauris finibus porta. Etiam sit amet aliquam odio, eu interdum tortor. Etiam ac porttitor nunc, quis elementum diam. Morbi nec vestibulum quam. Proin ultricies tempus tellus sit amet
ultrices. Cras quam dolor, vestibulum non quam ut, rutrum tincidunt augue. Vestibulum et nisl elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis, interdum libero non, tincidunt dolor. Quisque vestibulum vitae augue
eu tempus. Suspendisse nec enim mollis, auctor mi vitae, tincidunt lectus. Nullam interdum nisi at elit pretium, in tempus elit pharetra. Etiam posuere tempor sapien. Mauris pretium augue sapien, id vestibulum elit scelerisque a. Sed condimentum
ligula mauris, in posuere metus ultricies eu. Quisque ac sem ut mauris finibus porta. Etiam sit amet aliquam odio, eu interdum tortor. Etiam ac porttitor nunc, quis elementum diam. Morbi nec vestibulum quam. Proin ultricies tempus tellus sit amet
ultrices. Cras quam dolor, vestibulum non quam ut, rutrum tincidunt augue. Vestibulum et nisl elit.</li>
<li>here is some text...
<ol>
<li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li>
<li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li>
<li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li>
<li>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tellus purus, quis convallis odio accumsan at. Pellentesque non sagittis risus. Morbi in nulla lobortis</li>
</ol>
</li>
</ol>
</div>
The main problem with this approach, of course, is the arbitrary means of assigning the 'column'-width of the pseudo-elements, depending on how involved your list gets it's potentially possible to get to a state where 2em isn't sufficient to contain the list-item number of 1.4.2.4.b.a.iii; so this may be a fragile solution. Although you could, explicitly style those elements with:
li li li li li li li::before {
position: static;
display: block;
}
To place the counter above the content of those elements (or do whatever else might better suit your design constraints).
Just wondering if there would be an easier way of creating a one center column design than this snippet
CSS:
body {
background-color: #f9f9f9;
}
.centerCol {
background-color: #FFFFFF;
box-shadow:0 0 9px rgba(0,0,0,.44);
padding: 15px;
width: 65%;
height: auto;
float: none;
margin: 10px auto 20px;
margin-top: 60px;
}
HTML:
<div class="centerCol">
<h1 style="text-align:center">Center Column Test</h1>
<hr>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus luctus suscipit lectus, non elementum lorem viverra eu.
Aliquam suscipit iaculis orci eget accumsan. Aliquam erat volutpat.
Donec ornare ullamcorper enim, laoreet dignissim neque ullamcorper suscipit.
Mauris ut enim a tortor suscipit tincidunt ac ut ex.
Nullam quis ex in tellus sodales consectetur sit amet volutpat arcu.
Praesent porta quam eget tortor eleifend, a sodales ex imperdiet. Duis at tristique erat, eget sodales dui.
Cras turpis purus, pellentesque eu tellus sit amet, iaculis hendrerit massa.
Pellentesque consectetur odio elementum metus pulvinar, a sollicitudin magna facilisis.
</p>
</div>
I feel like it's already quite simple enough as it is but I thought I'd ask
It might be a stupid question, but why is first-child / lastchild not working on the blockquotes?
CSS
p { margin: 0 0 1.6em 0; }
blockquote { margin: 0; padding: 0 25px 1em; background-color: #CCC; border-left: 5px solid #333; }
blockquote:first-child { padding-top: 25px; color: red; }
blockquote:last-child { padding-bottom: 25px; margin-bottom: 1em; color: yellow; }
HTML
<div>
<p>Integer bibendum erat ipsum, ac sodales nisi suscipit ut. Nullam eu felis quis nisl consectetur vehicula vel vitae justo. Praesent ullamcorper pretium posuere. Aliquam in suscipit nisi. Suspendisse potenti. In sed ligula vitae libero gravida molestie eu in nisl. Etiam ornare ultrices dolor, id consequat orci fringilla non. Nam ultrices mauris rutrum, fringilla ligula nec, aliquet turpis. Proin turpis velit, dictum vel vehicula vitae, scelerisque a sapien.</p>
<blockquote>Lorem ipsum dolor sit amet</blockquote>
<blockquote>Lorem ipsum dolor sit amet</blockquote>
<blockquote>Nunc scelerisque, risus id tempor viverra, ante nibh pulvinar neque, non volutpat ante tellus facilisis justo. Donec eget auctor ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus lacus eget arcu suscipit vulputate. Sed at aliquet elit, in vestibulum metus. Nulla pharetra nibh quam, a ullamcorper nunc interdum sed. Etiam aliquam purus quis orci tincidunt malesuada. Etiam metus quam, gravida id molestie sit amet, suscipit eget leo.</blockquote>
<p>Integer bibendum erat ipsum, ac sodales nisi suscipit ut. Nullam eu felis quis nisl consectetur vehicula vel vitae justo. Praesent ullamcorper pretium posuere. Aliquam in suscipit nisi. Suspendisse potenti. In sed ligula vitae libero gravida molestie eu in nisl. Etiam ornare ultrices dolor, id consequat orci fringilla non. Nam ultrices mauris rutrum, fringilla ligula nec, aliquet turpis. Proin turpis velit, dictum vel vehicula vitae, scelerisque a sapien.</p>
<blockquote>Lorem ipsum dolor sit amet</blockquote>
<blockquote>Nunc scelerisque, risus id tempor viverra, ante nibh pulvinar neque, non volutpat ante tellus facilisis justo. Donec eget auctor ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus lacus eget arcu suscipit vulputate. Sed at aliquet elit, in vestibulum metus. Nulla pharetra nibh quam, a ullamcorper nunc interdum sed. Etiam aliquam purus quis orci tincidunt malesuada. Etiam metus quam, gravida id molestie sit amet, suscipit eget leo.</blockquote>
</div>
Update: What I want in this example:
blockquote 1: red
blockquote 2: default color
blockquote 3: yellow
blockquote 4: red
blockquote 5: yellow
JS-Fiddle
You are looking for :first-of-type/:last-of-type. As the name of the pseudo class implies, this will style the first/last of the element type.
UPDATED EXAMPLE HERE
blockquote:first-of-type {
padding-top: 25px;
}
blockquote:last-of-type {
padding-bottom: 25px;
margin-bottom: 1em;
}
Because they're not the first child or last child, the first child here is the p element.
To target the first blockquote, you may do
:not(blockquote) + blockquote {