Related
I have an html like this:
<div class="container">
<div class="vertical-btns">
<button>Click</button>
<button>Click</button>
<button>Click</button>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</div>
With this css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
background-color: #71E764;
max-width: 50rem;
height: 100%;
overflow: auto;
max-height: 500px;
margin: auto;
}
.vertical-btns {
position: fixed;
padding-left: 20px;
width: inherit;
max-width: inherit;
flex: auto;
flex-direction: column;
display: flex;
right: 0;
}
The result is that I have a container with 3 fixed buttons but outside of it. What I need is that the buttons stays inside the container on top right. But in this way, with right: 0, it's not relate to the parent container, but it seems relates to the web page. Is there a way to fix this?
that's the codepen and as you can see the buttos are totally on the right of the page instead of the container: https://codepen.io/eryonn/pen/oNBbOwe
Try to use position: absolute; to position an element inside a parent with position: relative; and then position: fixed; on an element inside the absolute positioned
Instead of right: 0; for the element .vertical-btns use
margin-left: min(50rem, 100%);
transform: translateX(-100%);
Why margin-left: min(50rem, 100%)?
That's because your wrapper has not a fixed width, but just a max-width. So when the viewport is smaller than 50rem it becomes responsive so also the margin-left must be lower, accordingly. More information about the CSS min() function can be found on MDN
Note 1: if you're using a CSS preprocessor an error could be raised while compiling the source, probably because the preprocessor already has a min() function. If you want to use the CSS function instead change the case of the letters (e.g Min(...)) since the css function are case-insensitive
Note 2: if your browser doesn't support the min() function in this case you could use a mediaquery which will do the same thing (just a bit more verbose), e.g.
.vertical-btns { margin-left: 100% }
#media (min-width: 50rem) {
.vertical-btns { margin-left: 50rem }
}
Result
"position: fixed" removes the element from the normal flow of the page and positions it in relation to the viewport. You can use "position: sticky" with "top:0" which will make your element stick to the top even when scrolling. Here's the code sample.
.vertical-btns {
position: sticky;
padding-left: 20px;
width: 100%;
flex: auto;
flex-direction: column;
display: flex;
align-items:flex-end;
top:0;
height:0;
}
Just use position: absoulte instead of position: fixed and you can position your buttons relative to the container wherever you want ;-)
Position fixed is allways relative to viewport. Position àbsouteis allways relative to the notstatic`positioned parent element.
See example:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
background-color: #71E764;
max-width: 50rem;
height: 100%;
overflow: auto;
max-height: 500px;
margin: auto;
}
.vertical-btns {
position: absolute;
top: 0;
right: 0;
padding-left: 20px;
width: inherit;
}
<div class="container">
<div class="vertical-btns">
<button>Click</button>
<button>Click</button>
<button>Click</button>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</div>
Note: Updated the code to comments.
I can't figure out what's blocking here, or if it's just not possible. I wanted to put together what seemed like a simple design, right aligned sidebar with the content of the sidebar aligned in the bottom, the main content flowing freely but not going underneath the sidebar, yet I can't get it right. This is as close as I can get it, but I can't get the background to run along the whole height.
.main_box {
width: calc(100% - 300px);
float:left;
background-color: green;
}
.side_panel {
float: right;
height: 100%;
background-color: blue;
}
.bottom_nav {
background-color: red;
width: 300px;
position: fixed;
right: 0;
bottom: 0;
}
<div class="main_box">
<div class="side_panel">
<div class="bottom_nav">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla posuere, nibh convallis tristique imperdiet, risus enim blandit felis, a semper mi arcu sit amet purus. Aliquam urna quam, venenatis et ligula ac, vestibulum efficitur diam. Integer vitae metus ac tellus consequat condimentum. Cras iaculis augue eget faucibus vehicula. Etiam facilisis metus ac sapien rutrum placerat. Nulla nibh enim, tincidunt ac suscipit vestibulum, tincidunt ac magna. Integer vestibulum, ligula sed accumsan faucibus, enim velit congue lorem, eget consequat eros est nec enim. Vestibulum ac gravida purus. Sed non rhoncus ante. Sed facilisis eros at risus feugiat laoreet. Aliquam imperdiet justo non velit luctus finibus. Proin eget finibus nulla, in congue nulla. Proin eget enim eget lorem tincidunt pellentesque. Suspendisse potenti. Morbi lacinia vehicula lacus id efficitur. Nunc fringilla libero augue, sed iaculis lorem efficitur nec.</p>
<p>Sed vel feugiat enim, at bibendum ex. Mauris id commodo arcu, nec lacinia nulla. Donec rhoncus ex quis urna suscipit condimentum. Suspendisse ante purus, vulputate a lectus efficitur, bibendum dignissim ante. Aliquam nec mollis sapien, placerat hendrerit nisi. Nam at tempus nisl. Donec accumsan augue non mauris varius, eu accumsan neque ullamcorper. Aliquam mollis, orci at varius euismod, urna eros pulvinar massa, sit amet viverra nunc arcu a tortor. Nunc pulvinar non erat vel volutpat. Donec eu blandit arcu. Vivamus bibendum dolor arcu, ut fringilla ex tincidunt nec. Sed id placerat tortor. Curabitur non tellus sagittis, sodales est vitae, blandit justo.</p>
</div>
when using a position:fixed the element you will get removed from the normal flow making its parent element empty like it doesn't exist.
Consider the parent element to be fixed then place the content inside at the bottom:
.main_box {
width: calc(100% - 300px);
float: left;
background-color: green;
}
.side_panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 300px;
background-color: blue;
}
.bottom_nav {
background-color: red;
position: absolute;
right: 0;
bottom: 0;
width:100%;
}
body {
margin:0;
}
<div class="main_box">
<div class="side_panel">
<div class="bottom_nav">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla posuere, nibh convallis tristique imperdiet, risus enim blandit felis, a semper mi arcu sit amet purus. Aliquam urna quam, venenatis et ligula ac, vestibulum efficitur diam. Integer vitae
metus ac tellus consequat condimentum. Cras iaculis augue eget faucibus vehicula. Etiam facilisis metus ac sapien rutrum placerat. Nulla nibh enim, tincidunt ac suscipit vestibulum, tincidunt ac magna. Integer vestibulum, ligula sed accumsan faucibus,
enim velit congue lorem, eget consequat eros est nec enim. Vestibulum ac gravida purus. Sed non rhoncus ante. Sed facilisis eros at risus feugiat laoreet. Aliquam imperdiet justo non velit luctus finibus. Proin eget finibus nulla, in congue nulla.
Proin eget enim eget lorem tincidunt pellentesque. Suspendisse potenti. Morbi lacinia vehicula lacus id efficitur. Nunc fringilla libero augue, sed iaculis lorem efficitur nec.</p>
<p>Sed vel feugiat enim, at bibendum ex. Mauris id commodo arcu, nec lacinia nulla. Donec rhoncus ex quis urna suscipit condimentum. Suspendisse ante purus, vulputate a lectus efficitur, bibendum dignissim ante. Aliquam nec mollis sapien, placerat hendrerit
nisi. Nam at tempus nisl. Donec accumsan augue non mauris varius, eu accumsan neque ullamcorper. Aliquam mollis, orci at varius euismod, urna eros pulvinar massa, sit amet viverra nunc arcu a tortor. Nunc pulvinar non erat vel volutpat. Donec eu blandit
arcu. Vivamus bibendum dolor arcu, ut fringilla ex tincidunt nec. Sed id placerat tortor. Curabitur non tellus sagittis, sodales est vitae, blandit justo.</p>
</div>
I made a page to practice using flexbox. It has 1 container in red with 3 flex items. When I minimize the screen the items drop below each other but do not use up the full width of container.
How can I achieve this?
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: stretch;
margin: 40px;
background-color: red;
}
.col {
max-width: 400px;
}
.one,
.two-a,
.two-b,
.three {
background-color: black;
color: white;
padding: 20px;
margin: 1rem;
}
h2,
h3 {
font-family: arial;
}
h2 {
margin-left: 2rem;
}
<div class="container">
<!-- <h2>Flexbox</h2> -->
<div class="one col">
<h3>Step 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget dui ut justo auctor semper a ullamcorper justo. Morbi placerat tortor tortor, ac dignissim leo semper ac. Donec non metus sit amet neque eleifend rhoncus vitae id dolor. Etiam vestibulum
lobortis sem semper laoreet. Vestibulum egestas elit sed lacus egestas, placerat congue erat faucibus. Nunc ac dui auctor, fermentum turpis ac, mattis magna. Nulla pellentesque, ligula vel faucibus imperdiet, arcu ligula ornare quam, et blandit
risus sem sit amet neque. Curabitur commodo dui et metus suscipit, ut dignissim risus hendrerit. Quisque at odio nec risus condimentum ullamcorper. Nulla sit amet felis sit amet neque aliquet auctor sed nec metus. Sed gravida mattis sem, nec finibus
diam suscipit sit amet.</p>
</div>
<div class="two col">
<div class="two-a">
<h3>Step 2a</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget dui ut justo auctor semper a ullamcorper justo. Morbi placerat tortor tortor, ac dignissim leo semper ac. Donec non metus sit amet neque eleifend rhoncus vitae id dolor. Etiam
vestibulum lobortis sem semper laoreet. Vestibulum egestas elit sed lacus egestas, placerat congue erat faucibus. Nunc ac dui auctor, fermentum turpis ac, mattis magna. Nulla pellentesque, ligula vel faucibus imperdiet, arcu ligula ornare quam,
et blandit risus sem sit amet neque. Curabitur commodo dui et metus suscipit, ut dignissim risus hendrerit. Quisque at odio nec risus condimentum ullamcorper. Nulla sit amet felis sit amet neque aliquet auctor sed nec metus. Sed gravida mattis
sem, nec finibus diam suscipit sit amet.</p>
</div>
<div class="two-b">
<h3>Step 2b</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget dui ut justo auctor semper a ullamcorper justo. Morbi placerat tortor tortor, ac dignissim leo semper ac. Donec non metus sit amet neque eleifend rhoncus vitae id dolor. Etiam
vestibulum lobortis sem semper laoreet. Vestibulum egestas elit sed lacus egestas, placerat congue erat faucibus. Nunc ac dui auctor, fermentum turpis ac, mattis magna. Nulla pellentesque, ligula vel faucibus imperdiet, arcu ligula ornare quam,
et blandit risus sem sit amet neque. Curabitur commodo dui et metus suscipit, ut dignissim risus hendrerit. Quisque at odio nec risus condimentum ullamcorper. Nulla sit amet felis sit amet neque aliquet auctor sed nec metus. Sed gravida mattis
sem, nec finibus diam suscipit sit amet.</p>
</div>
</div>
<div class="three col">
<h3>Step 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget dui ut justo auctor semper a ullamcorper justo. Morbi placerat tortor tortor, ac dignissim leo semper ac. Donec non metus sit amet neque eleifend rhoncus vitae id dolor. Etiam vestibulum
lobortis sem semper laoreet. Vestibulum egestas elit sed lacus egestas, placerat congue erat faucibus. Nunc ac dui auctor, fermentum turpis ac, mattis magna. Nulla pellentesque, ligula vel faucibus imperdiet, arcu ligula ornare quam, et blandit
risus sem sit amet neque. Curabitur commodo dui et metus suscipit, ut dignissim risus hendrerit. Quisque at odio nec risus condimentum ullamcorper. Nulla sit amet felis sit amet neque aliquet auctor sed nec metus. Sed gravida mattis sem, nec finibus
diam suscipit sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget dui ut justo auctor semper a ullamcorper justo. Morbi placerat tortor tortor, ac dignissim leo semper ac. Donec non metus sit amet neque eleifend rhoncus vitae id dolor. Etiam vestibulum
lobortis sem semper laoreet. Vestibulum egestas elit sed lacus egestas, placerat congue erat faucibus. Nunc ac dui auctor, fermentum turpis ac, mattis magna. Nulla pellentesque, ligula vel faucibus imperdiet, arcu ligula ornare quam, et blandit
risus sem sit amet neque. Curabitur commodo dui et metus suscipit, ut dignissim risus hendrerit. Quisque at odio nec risus condimentum ullamcorper. Nulla sit amet felis sit amet neque aliquet auctor sed nec metus. Sed gravida mattis sem, nec finibus
diam suscipit sit amet.</p>
</div>
</div>
https://codepen.io/cian-w/pen/EQZmRz
You have a rule limiting the width of flex items:
.col {
max-width: 400px;
}
Therefore, the items cannot fill the full width of the container because they cannot expand beyond 400px. Try this instead:
.col {
flex: 1 0 400px;
}
This shorthand declaration breaks down to:
flex-grow: 1
flex-shrink: 0
flex-basis: 400px
revised codepen
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).
I'm trying to create a sidebar that rests next to the content div but it sits below the content div, it's at the right x position just not the right y.
HTML:
<body>
<div id="framediv">
<div id="headerdiv">
</div>
<div id="content" class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla adipiscing velit, a pharetra sem dictum vel. Aliquam varius porta est, vitae pulvinar nunc adipiscing in. Maecenas sem eros, gravida nec blandit vel, aliquam at dui. Aliquam ante est, lacinia id laoreet ac, convallis ac magna. Maecenas rhoncus ligula vitae mauris volutpat sed dapibus lectus fringilla. Nam orci metus, molestie eu placerat sit amet, faucibus in libero. Nunc tristique, elit vitae tincidunt rutrum, odio erat blandit nibh, eu facilisis sapien dolor rhoncus risus. Ut eu velit lectus. Sed vitae nisl orci. Nulla vel nisl ante. Donec sit amet nulla eget massa euismod ultrices vitae at nisi. Donec tempor justo auctor libero dapibus viverra. Cras commodo fermentum nisi. Maecenas porttitor euismod metus lacinia sodales. Aliquam egestas ligula purus, id sollicitudin risus. Nullam vel odio et libero viverra blandit vel et dolor.
Nullam mauris dui, consequat a placerat eu, semper non mi. Nam in leo vel lorem adipiscing commodo. Duis vestibulum erat vel felis tincidunt in congue ipsum rutrum. Sed in ipsum ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra nisi eget arcu malesuada at dapibus elit varius. Morbi sodales, justo fermentum lobortis elementum, orci turpis vehicula nisl, quis laoreet sapien libero a leo. Aenean ac arcu augue, vitae pellentesque ipsum. Ut nec mauris at nisl luctus tempor a sed turpis. Pellentesque in odio libero, sit amet tincidunt nisl. Duis dictum tortor vitae sem sagittis in molestie nisl interdum. Maecenas mollis adipiscing augue, eget accumsan justo ultrices a. Suspendisse scelerisque justo et nisl consectetur a varius lacus sodales. Duis accumsan iaculis nulla, non pretium metus venenatis et. Sed gravida elementum ipsum sed aliquet.
Vestibulum tincidunt pulvinar aliquet. Nullam bibendum vulputate diam quis mattis. Etiam mollis dui eu quam feugiat pharetra. Donec non tempus eros. Fusce eleifend magna eu lorem imperdiet bibendum rhoncus eget odio. Etiam adipiscing nibh sit amet augue elementum tempus. Etiam hendrerit massa a augue laoreet vitae pretium enim aliquet. Mauris malesuada lorem vitae neque pretium convallis. Sed condimentum semper ipsum, consectetur imperdiet eros interdum eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec adipiscing nisi in erat feugiat tempor. Nunc tincidunt neque non nisl tristique quis ornare elit ornare.
Praesent nec augue ligula, quis iaculis diam. Nam eget felis est, eget pellentesque lectus. Ut suscipit varius magna, ac vestibulum risus egestas ac. Quisque id sapien sed leo luctus faucibus in non leo. Integer sit amet pellentesque velit. Vivamus convallis, lacus nec tincidunt viverra, nunc velit aliquam nisi, eu pretium tellus nisl eget eros. Etiam dolor leo, feugiat vel faucibus ac, ullamcorper quis turpis. Mauris nec felis elit. Donec dignissim ullamcorper arcu. Proin tempor, dui vel malesuada viverra, lacus mauris ullamcorper lacus, eu convallis dolor justo non massa. Maecenas volutpat, leo gravida eleifend pharetra, dolor mauris tempor odio, quis facilisis tellus nisl quis sapien. Donec quam mauris, malesuada id iaculis ut, pellentesque non mauris. Nullam interdum justo id nunc tempor sed consequat quam venenatis.
Curabitur ipsum augue, posuere at adipiscing nec, rutrum in nisi. Ut mattis placerat est aliquam vulputate. Nullam faucibus, libero in facilisis auctor, lectus metus suscipit ligula, quis sollicitudin ligula erat sit amet nisi. Suspendisse et suscipit lectus. Sed fermentum porta lorem, vel congue tortor sollicitudin molestie. Nulla imperdiet purus non velit ornare vestibulum id at massa. Curabitur lorem urna, fermentum ut suscipit sed, pretium sed ante. Nullam ligula ante, aliquam at blandit ac, aliquam in velit. Cras nisl libero, iaculis at rutrum ac, mollis nec tortor. Aenean dignissim viverra molestie. Vivamus ultricies sem purus, tempor pharetra elit. Sed placerat est at turpis eleifend accumsan. Cras metus ante, imperdiet et suscipit ut, interdum eget est. In rutrum imperdiet mi in consectetur.
</div>
<div id="sidebar" align="center" class="container">
<p>dvsdvs</p>
</div>
</div>
</body>
CSS:
#menudiv{
display:inline-block;
float:none;
padding-bottom:20px;
}
#html, body {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width:980px;
height: 100%;
margin: auto;
}
#headerdiv{
width:950px;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow:10px 10px 20px #000;
}
#content.container{
height:100%;
width: 640px;
padding-top:50;
margin-top:50;
padding-left: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
border:thin;
border-color:#CCC;
border-style:solid;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow:10px 10px 20px #000;
}
#sidebar{
position:absolute
float:left;
float:right;
top:250px;
height:100%;
width: 280px;
border:thin;
border-color:#CCC;
border-style:solid;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow:10px 10px 20px #000;
}
Here #html, body you don't need the '#' in front of html. On #sidebar you have
float:left;
float:right;
... don't think you any of it since you're positioning it absolute.
JSFiddle would be helpful as well.
Wrap your content with DIV
<div id="content" class="container">
<div id="maincontent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla adipiscing
velit, a pharetr
</div>
<div id="sidebar" align="center" class="container">
<p>dvsdvs</p>
</div>
</div>
.container#maincontent {float:left: width:75%} //75% minus paddings minus margins minus borders
.container#sidebar {float:right; width:25%} //25% minus paddings minus margins minus borders
Your question seems a bit contradictory... as does a bit of your code.
If you simply want the sidebar to fall along the right side of the content div, then you could move your sidebar div, in the code, above the content div and assign it a "float: right".
If by "but it sits below the content div" you're referring to the code as opposed to the visual layout, then you can float the content div to the left and remove float on the sidebar (or float: right).
I also noticed that in your #sidebar css you're declaring conflicting floats for both left AND right.
Include float in your container as well.