Vertical line with text around - html

I need to do something like this:
A vertical line with text on the left and on the right.
I looked How to make a vertical line in HTML
I though about making a vertical line and then use border-left and border-right
But I don't see how to do it in pratic.

I made a very basic example, you might have to modify the #content rule for the size you need:
HTML
<div id="content">
<div id="text">
<div class="txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="txt-r">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
<div id="vline"></div>
</div>
CSS
body{
margin: 0;
}
.txt{
margin-left: 5%;
}
.txt-r{
margin-left: 55%;
}
.txt-r, .txt {
width: 40%;
margin-top: 1%;
border-style: solid;
}
#text{
position: absolute;
}
#vline{
position: absolute;
border-left: thick solid #000000;
margin-left: 50%;
height: 100%;
}
#content{
position: absolute;
width: 100%;
height: 100%;
}
JSFIDDLE

Related

Changing position from absolute to sticky moves `:after` element to bottom of container

A bit of info on this code first. This is 'legacy code' from education software and there are 1000's of pages marked up like this. So ideally I want to find a solution without changing the markup on every page - if possible!
The problem I have is, there are two images that are fixed to the left and right of the content. This works fine. However now the images need to remain in a sticky position as the user scrolls down the page.
Because the :before and :after classes are used. As soon as I change to Sticky. The :after element is positioned below the container. I know why this happens but wondering if anyone can think of a workaround?
I have tried floating left/right with negative margins, which works for :before but not the :after element.
I've added the code to this post but the CodePen might also be helpful to view in a wider window as the left/right elements are hidden on narrower viewports. The layout here is correct. The items just need to remain sticky in the same position on scroll.
CodePen: https://codepen.io/moy/pen/ExQvWWg
This is still used for education software, so I'm a bit wary of changing to flex as I don't have any data on browsers used. Only other solutions I've thought is applying as background images to the .container.
body {
background: #29cebe url(../img/interface/body-bg.png) center top;
background-size: 500px 500px;
box-shadow: inset 0 1px 0 rgb(255 255 255 / 32%),
inset 0 -1px 0 rgb(255 255 255 / 32%);
box-sizing: border-box;
color: #282c2e;
font-size: 14px;
font-size: 1.4rem;
font-weight: 400;
height: calc(100% - 144px);
letter-spacing: 0.024em;
line-height: 1.5;
margin: 0 auto;
position: relative;
top: 72px;
width: 100%;
}
.page {
height: 100%;
min-height: 100%;
overflow-x: hidden;
overflow-y: auto;
min-width: 800px;
}
.page-head,
.page-foot {
background: black;
color: white;
height: 72px;
position: fixed;
top: 0;
text-align: center;
width: 100%;
z-index: 100;
}
.page-foot {
top: auto;
bottom: 0;
}
.container {
margin: 0 auto;
padding: 32px 0;
position: relative;
width: 100%;
max-width: 1024px;
z-index: 10;
}
.container:before,
.container:after {
content: "";
display: block;
position: absolute;
}
.container:before {
background: red;
background-size: 100%;
height: 370px;
top: 64px;
left: -120px;
width: 111px;
}
.container:after {
background: red;
background-size: 100%;
height: 362px;
top: 64px;
right: -112px;
width: 98px;
}
.wrap {
background: white;
box-shadow: inset -4px -4px 0 rgb(0 0 0 / 8%), 4px 4px 0 rgb(0 0 0 / 12%);
border-radius: 12px;
padding: 32px 32px 0;
position: relative;
}
<div class="page">
<header class="page-head">
Header
</header>
<div class="container">
<div class="wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<footer class="page-foot">
Footer
</footer>
</div>
i can do that using JavaScript not sure about css.
here a demo if you want .
it's bit janky sometime but with some tweak you cant convert it to elastic effect.
var containerOverrindeStyle = document.createElement("style");
window.onscroll = function (e) {
fromTop(Math.ceil(scrollY));
};
function fromTop(offset){
containerOverrindeStyle.innerHTML = `.container:after,.container:before { top: ${
64 + offset
}px; }`;
document.head.appendChild(containerOverrindeStyle);
}
body {
background: #29cebe url(../img/interface/body-bg.png) center top;
background-size: 500px 500px;
box-shadow: inset 0 1px 0 rgb(255 255 255 / 32%),
inset 0 -1px 0 rgb(255 255 255 / 32%);
box-sizing: border-box;
color: #282c2e;
font-size: 14px;
font-size: 1.4rem;
font-weight: 400;
height: calc(100% - 144px);
letter-spacing: 0.024em;
line-height: 1.5;
margin: 0 auto;
position: relative;
top: 72px;
width: 100%;
}
.page {
height: 100%;
min-height: 100%;
overflow-x: hidden;
overflow-y: auto;
min-width: 800px;
}
.page-head,
.page-foot {
background: black;
color: white;
height: 72px;
position: fixed;
top: 0;
text-align: center;
width: 100%;
z-index: 100;
}
.page-foot {
top: auto;
bottom: 0;
}
.container {
margin: 0 auto;
padding: 32px 0;
position: relative;
width: 100%;
max-width: 1024px;
z-index: 10;
}
.container:before,
.container:after {
content: "";
display: block;
position: absolute;
}
.container:before {
background: red;
background-size: 100%;
height: 370px;
top: 64px;
left: -120px;
width: 111px;
}
.container:after {
background: red;
background-size: 100%;
height: 362px;
top: 64px;
right: -112px;
width: 98px;
}
.wrap {
background: white;
box-shadow: inset -4px -4px 0 rgb(0 0 0 / 8%), 4px 4px 0 rgb(0 0 0 / 12%);
border-radius: 12px;
padding: 32px 32px 0;
position: relative;
}
<div class="page">
<header class="page-head">
Header
</header>
<div class="container">
<div class="wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<footer class="page-foot">
Footer
</footer>
</div>
Or you can do that using css :
open in full page
body {
background: #29cebe url(../img/interface/body-bg.png) center top;
background-size: 500px 500px;
box-shadow: inset 0 1px 0 rgb(255 255 255 / 32%),
inset 0 -1px 0 rgb(255 255 255 / 32%);
box-sizing: border-box;
color: #282c2e;
font-size: 14px;
font-size: 1.4rem;
font-weight: 400;
height: calc(100% - 144px);
letter-spacing: 0.024em;
line-height: 1.5;
margin: 0 auto;
position: relative;
top: 72px;
width: 100%;
}
.page {
height: 100%;
min-height: 100%;
overflow-x: hidden;
overflow-y: auto;
min-width: 800px;
}
.page-head,
.page-foot {
background: black;
color: white;
height: 72px;
position: fixed;
top: 0;
text-align: center;
width: 100%;
z-index: 100;
}
.page-foot {
top: auto;
bottom: 0;
}
.container {
margin: 0 auto;
padding: 32px 0;
position: relative;
width: 100%;
max-width: 1024px;
z-index: 10;
}
.container:before,
.container:after {
content: "";
display: block;
position: fixed;
}
.container:before {
background: red;
background-size: 100%;
height: 370px;
top: 175px;
left: -65px;
width: 111px;
}
.container:after {
background: red;
background-size: 100%;
height: 362px;
top: 175px;
right: -35px;
width: 98px;
}
.wrap {
background: white;
box-shadow: inset -4px -4px 0 rgb(0 0 0 / 8%), 4px 4px 0 rgb(0 0 0 / 12%);
border-radius: 12px;
padding: 32px 32px 0;
position: relative;
z-index:2;
}
<div class="page">
<header class="page-head">
Header
</header>
<div class="container">
<div class="wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<footer class="page-foot">
Footer
</footer>
</div>

Image displaying behind the section after using overflow hidden

I am getting the horizontal scroll when using after class.
If I use overflow then my image is displaying behind the first section.
Would you help me out with these issues?
This is the after class which is not working. I am getting scrollbar
section {
height: 400px;
position: relative;
}
.test1 {
overflow: hidden;
}
.test1:after {
content: "";
background-image: url('https://www.netclipart.com/pp/m/16-165891_sale-price-tag-png-sale-icon-png.png');
background-repeat: no-repeat;
background-size: contain;
width: 350px;
height: 308px;
display: block;
position: absolute;
top: -15%;
right: -10%;
}
<section style="background-color: #f8f8f8;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="test1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
I am getting the output
My expected output
Problem is img is relative to that div so it cut, Setting right
0 and width to actual width of img solved that problem
section {
height: 400px;
position: relative;
}
.test1 {
}
.test1:after {
content: "";
background-image: url('https://www.netclipart.com/pp/m/16-165891_sale-price-tag-png-sale-icon-png.png');
background-repeat: no-repeat;
background-size: contain;
width: 210px;
height: 308px;
display: block;
position: absolute;
top: -15%;
right: 0;
background-position: 47px center
}
<section style="background-color: #f8f8f8;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="test1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>

How do I stop two elements from overlapping vertically? [duplicate]

This question already has an answer here:
fixed position header overlapping
(1 answer)
Closed 3 years ago.
Ok so first things first. I have a navigation bar at the top of my page, and I've set it's position property to fixed so that it stays on screen all the time.
The problem is that as soon as i did that the div below it shifted upwards going underneeth the nav element.
I have searched about this topic and found only solutions that involved setting the position property of the above div as relative. But doing so the navigation bar doesn't stay there, it moves with the rest of the page when scrolling down.
This is the code:
* {
padding: 0;
margin: 0;
}
.nav-bar {
position: fixed;
overflow: hidden;
width: 90%;
height: 30px;
background: #006666;
z-index: 1;
color: #fff;
}
.content {
position: relative;
background: #aaa;
color: #fff;
}
<body>
<nav class="nav-bar">Navigation bar</nav>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.</div>
</body>
I've tried different combinations of positions of both elements but none of them worked as i wanted.
Here is the fiddle: https://jsfiddle.net/e1nbxj8v/
Add padding-top:30px of .content
.content {
position: relative;
background: #aaa;
color: #fff;
padding-top:30px;
}
https://jsfiddle.net/lalji1051/yafeu1x7/
Have you consider adding margin-top: 30px; to content and nav making top: 0; ?
https://jsfiddle.net/dv7pyh92/1/
I recommend you rather use a very simple CSS grid:
grid-template-rows: 30px calc(100vh - 30px);
* {
padding: 0;
margin: 0;
}
.nav-bar {
width: 90%;
height: 100%;
background: #006666;
color: #fff;
}
.content {
background: #aaa;
color: #fff;
height: 100%;
overflow: auto;
}
body {
display: grid;
grid-template-rows: 30px calc(100vh - 30px);
}
<body>
<nav class="nav-bar">Navigation bar</nav>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.</div>
</body>

CSS: scrollbar that doesn't have 100% height / width

Is it possible to force vertical scrollbar to have less than 100% height of scrollable div it's part of with pure CSS and for all modern browsers except IE?
So far all I came up with is webkit-only solution with it's ::-webkit-scrollbar CSS selectors, and trick for custom buttons height, like so:
.parent {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: 1px solid #000000;
box-sizing: border-box;
overflow-y: scroll;
}
.child {
height: 200%;
width: 100%;
overflow: hidden;
}
.parent::-webkit-scrollbar {
width: 12px;
}
.parent::-webkit-scrollbar-track {
border: 1px solid #000000;
}
.parent::-webkit-scrollbar-thumb {
background: #FF0000;
}
.parent::-webkit-scrollbar-button {
background: transparent;
height: 25%;
}
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
I tried to trick .parent with transform: scale in only one direction, so to shrink parent and grow content with same value, like so:
.parent {
transform: scale(0.5, 1);
}
.child {
transform: scale(2, 1);
}
... but it doesn't work, as child can't extend parent's dimensions without position absolute, which makes it invisible for parent, and scrollbar unnecessary.
If there is any other way around, I'm all ears, as I prefer CSS over additional JS plugins / librariers / packages.
It's CSS-only question. I know there are JS plugins that can create whatever scrollbar I want.
You can use ::-webkit-scrollbar-track-piece to customize the top-most layer of the the progress bar. In this case it will not be on 100% of the parent height.
.parent {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: 1px solid #000000;
box-sizing: border-box;
overflow-y: scroll;
}
.child {
height: 200%;
width: 100%;
overflow: hidden;
}
.parent::-webkit-scrollbar {
width: 12px;
}
.parent::-webkit-scrollbar-track {
/*border: 1px solid #000000;*/
}
.parent::-webkit-scrollbar-thumb {
background: #FF0000;
}
.parent::-webkit-scrollbar-button {
background: transparent;
/*height: 25%;*/
}
/* this will do the trick */
.parent::-webkit-scrollbar-track-piece {
margin-top: 1rem;
margin-bottom: 1rem;
border: 1px solid #000000;
}
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>

Css two columns with offset center

Hi i currently have two colums one left and one right with the left column having two rows in it
however i want the centre point of the column offset to the right so the left column would be about 60% and the right would be 40%
Here is the html and css i am using
#import url(http://fonts.googleapis.com/css?family=Lora:700);
.container {
width: 75%;
margin: auto;
}
.titleheader {
text-align: center;
margin-top: 5px;
font-size: 70px;
font-family: 'Lora', serif;
border-bottom: 3px solid #000;
width: 56%;
margin: auto;
}
.midcontainer {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
margin-top: 20px;
}
.top {
margin-bottom: 15px;
}
.bottom {} .rightsection {} .leftsection {
display: inline-block;
}
.memo {}
<div class="container">
<div class="titleheader">
<?php echo $this->Accountname; ?></div>
<div class="midcontainer">
<div class="leftsection">
<div class="top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="rightsection">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="memo"></div>
</div>
As much as I love them, you cannot set the widths of CSS columns independently. However, you can get the layout you're looking for by using CSS tables:
.midcontainer {
display:table;
border-spacing: 50px;
border-collapse: separate;
}
.leftsection, .rightsection{
display:table-cell;
}
.rightsection {
width:40%
}
#import url(http://fonts.googleapis.com/css?family=Lora:700);
.container{
width: 75%;
margin: auto;
border:1px dotted #ccc;
}
.titleheader{
text-align: center;
margin-top: 5px;
font-size: 70px;
font-family: 'Lora', serif;
border-bottom: 3px solid #000;
width: 56%;
margin: auto;
}
.midcontainer {
display:table;
border-spacing: 50px;
border-collapse: separate;
}
.leftsection, .rightsection{
display:table-cell;
}
.rightsection {
width:40%
}
.top{
margin-bottom: 15px;
}
.bottom{
}
.memo{
}
<div class="container">
<div class="titleheader">Invalid Account Number</div>
<div class="midcontainer">
<div class="leftsection">
<div class="top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="rightsection">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="memo"></div>