Trying to add a border to some divs but am having some trouble! The left and right side aren't showing up for some reason. Code is as follows, also on jsfiddle: https://jsfiddle.net/3owmdzz4/
CSS:
*{
padding : 0;
margin : 0;
border : 0;
}
body{
background-image: url('img/0x0E14.png');
background-repeat: repeat;
background-attachment: fixed;
cursor: url('cursor.cur'), auto;
}
.blended_grid{
display : table;
width : 791px;
overflow : auto;
margin : 50px auto 0 auto;
}
.menu{
background-image : url('img/menu.png');
float : left;
clear : none;
height : 54px;
width : 791px;
}
.left{
background-image : url('img/bg-left.png');
float : left;
clear : none;
height : auto;
width : 77px;
}
.center{
background-image : url('img/0x00C8.png');
float : left;
clear : none;
height : auto;
width : 637px;
}
.right{
background-image : url('img/bg-right.png');
background-repeat: repeat;
float : left;
clear : none;
height : auto;
width : 77px;
}
.footer{
background-image : url('img/footer.png');
float : left;
clear : none;
height : 68px;
width : 791px;
}
HTML:
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Page Title</title>
<meta name="description" content="Write some words to describe your html page">
</head>
<body>
<div class="blended_grid">
<div class="menu">
</div>
<div class="left"><img src="img/dragon-left.png">
</div>
<div class="center">
"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."
Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
"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."
Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</div>
<div class="right"><img src="img/dragon-right.png">
</div>
<div class="footer">
</div>
</div>
</body>
</html>
Could someone please tell me what I did wrong? Thanks!!
After reviewing your code and your requirement, i have done changes in css as well as in html too.
Please check updated fiddle
I just used background on main container div .foo .
background: url('http://i.imgur.com/DKiJnsX.png') bottom left repeat-y, url('http://i.imgur.com/HInbtY0.png') bottom right repeat-y;
so if div's height will increase, both borders will also increase. Hope it will help. Let me know if you have any question. Thank you
Related
I have a background-image (size: contain) and a div (position: absolute).
The main issue is that when I change the screen size (mobile size), the box is positioned on the left and it doesn't remain fixed in the place where it is supposed to stay. How can I achieve this or is there another way to do it and having the same result using mobile/laptop? My code for the content is as follows:
body{
background-color: #000;
text-align: center;
margin: 0;
}
#fase_0 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url(https://i.imgur.com/FJxBokN.png);
background-size: contain;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-position: center top;
}
.disclaimer {
position:absolute;
right:33%; top:9%;
width:420px; height:200px;
overflow: auto;
text-align: left;
font-size: 12px;
color: #8f8f8f;
font-family: "DejaVu Serif";
}
<div id="fase_0">
</div>
<div class="disclaimer">
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. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.
</div>
Here the codepen link: CodePen
I advise you to have your code like this:
:root {
--width: 1vw;
}
body {
background-color: #000;
text-align: center;
margin: 0;
}
#fase_0 {
background-image: url(https://i.imgur.com/FJxBokN.png);
background-size: contain;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-position: center top;
position: absolute;
}
.disclaimer {
position: relative;
width: 36%;
height: calc(var(--width)*653*1920/94800);
overflow: auto;
text-align: left;
font-size: 12px;
color: #8f8f8f;
font-family: "DejaVu Serif";
margin: 5% auto 0;
padding-left: 4%;
}
#media (orientation: portrait) {
#fase_0 {
background-size: cover;
}
.disclaimer {
width: 70%;
height: 25%;
margin-top: 12.5%;
padding-left: 10%;
}
}
<html lang="en">
<body translate="no">
<div id="fase_0">
<div class="disclaimer">
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. Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum
qui dolorem eum fugiat quo voluptas nulla pariatur.
</div>
</div>
</body>
</html>
This would only work if the "#fase_0" is equal to the width of the window; if it's not you'll have a bit more problem but that could still be achievable via JS, but not pure CSS as I did, now.
If you want that you can tell me and I'll edit my message to what you want.
P.S. Do not trust the snippet but use the code manually in an HTML file
EDIT 1: Fixing the snippet.
EDIT 2: Adding the JS code for no full-width containers:
function centreAlign() {
let a = document.getElementById("fase_0").getBoundingClientRect().width / 100;
document.documentElement.style.setProperty("--width", a + "px");
}
centreAlign()
:root {
--width: 1vw;
}
body {
background-color: #000;
text-align: center;
margin: 0;
}
#fase_0 {
background-image: url(https://i.imgur.com/FJxBokN.png);
background-size: contain;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-position: center top;
position: absolute;
}
.disclaimer {
position: relative;
width: 36%;
height: calc(var(--width)*653*1920/94800);
overflow: auto;
text-align: left;
font-size: 12px;
color: #8f8f8f;
font-family: "DejaVu Serif";
margin: 5% auto 0;
padding-left: 4%;
}
#media (orientation: portrait) {
#fase_0 {
background-size: cover;
}
.disclaimer {
width: 70%;
height: 25%;
margin-top: 12.5%;
padding-left: 10%;
}
}
<html lang="en">
<body translate="no">
<div id="fase_0">
<div class="disclaimer">
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. Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum
qui dolorem eum fugiat quo voluptas nulla pariatur.
</div>
</div>
</body>
</html>
With this JS code, you can run the function centreAlign to, well, centre align the disclaimer.
I have this flex item expanding its height beyond its flex container if font-size is bigger.
.jobTitleDescCont {
display: flex;
flex-flow: column nowrap;
height: 100%;
border: yellowgreen solid 5px;
}
.jobTitleDescCont .jobTitle {
font-size: 1em;
height: 30%;
border: blue 5px solid;
}
.jobTitleDescCont .jobDesc {
font-size: 2em;
height: 70%;
border: green 5px solid;
overflow: auto;
}
<div class="jobTitleDescCont">
<div class="jobTitle">
{{job.title}}
</div>
<div class="jobDesc">
{{job.description}}
</div>
</div>
Here, .jobTitleDescCont .jobDesc font-size: 1em; and it works alright, overflow would work as expected without increasing its height, it's still within its container.
But when you .jobTitleDescCont .jobDesc font-size: 2em;, the flex container also increases and as a result, the flex item too.
Notice here in the lower right corner, the green and the yellowgreen border of the expanding flex item and the flex container is increasing. Of course, the scroll bar can go beyond that too and if the text is long enough, you can scroll beyond the visible part of the scrollbar until you can no longer see the scrollbar.
As per my understanding, the height of the flex container should remain 100% relative to it's container so as the flex item. I also know that flex items are responsive so they can get bigger depending on the content but I have the overflow to take care of the content.
Shouldn't just the overflow scrollbar just get longer as it accomodates bigger font text?
Why is it increasing the height of the flex container and item?
A temporary fix I have is setting height: 575px
.jobTitleDescCont {
display: flex;
flex-flow: column nowrap;
height: 575px;
border: yellowgreen solid 5px;
}
but this defeats the responsive CSS.
On your .jobDesc class you should replace height: 70% with flex: 1 this way it takes up the remainder of the available space. And although I can't reproduce your error you should add box-sizing: border-box to the container, in your case jobTitleDescCont, it might take care of the overflow issue.
I found the culprit but I still don't understand why.
As you can see, there's an <img> here. If I remove that, everything goes well but even if I wrap that into another , the problem exists again. I don't understand why.
.jobTitleDescCont is supposed to respect the height given by their .col1 flex container.
As .ExpandedjobImage is a static image size, giving height: 100% to .jobTitleDescCont will only cause it to occupy the remaining space and allocate the whatever space remains to .jobTitle and .jobDesc which they share in 30-70 ratio.
<div class="col1">
<img class="ExpandedjobImage" :src="'a URL'" />
<div class="jobTitleDescCont">
<div class="jobTitle">
<scale-font-size :text="job.title" />
</div>
<div class="jobDesc">
{{job.description}}
</div>
</div>
</div>
.col1 {
display: flex;
height: 100%;
flex-flow: column nowrap;
width: 30%;
border: solid green 5px;
}
.ExpandedjobImage {
object-fit: contain;
}
.jobTitleDescCont {
display: flex;
flex-flow: column wrap;
border: yellowgreen solid 5px;
}
.jobTitleDescCont .jobTitle {
font-size: 3em;
max-height: 30%;
padding: 5%;
border: blue 5px solid;
}
.jobTitleDescCont .jobDesc {
font-size: 1.5em;
height: 70%;
padding: 5%;
word-break: break-all;
overflow-y: auto;
border: green 5px solid;
}
I think I understood your problem. In the following snippet we will fix the height to 100vh [100% of viewport height] instead of 100%
So, a clean way to keep a 30-70 ratio independently from the font is the following:
JSFiddle
.jobTitleDescCont {
display: flex;
height: 100vh;
flex-flow: column nowrap;
border: yellowgreen solid 5px;
}
.jobTitle {
height: 30%;
font-size: 1em;
border: blue 5px solid;
}
.jobDesc {
height: 70%;
font-size: 3em;
border: green 5px solid;
overflow-y: auto;
}
<div class="jobTitleDescCont">
<div class="jobTitle">ciao</div>
<div class="jobDesc">ciao 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. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velitciao 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. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velitciao 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. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velitciao 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. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit</div>
</div>
When the font size increases this will make the scroll bar of the second flex item longer without affecting the entire length of the container, exactly as you were asking
In your specific case the content of jobTitle won't be overflowing its 30% height, so I avoided to add the overflow-y: auto as in the second flex item. If this is not the case it must be added to respect the 30-70 relationship
If the hypothesis above is correct, you can also avoid plenty of empty space in the first flex item replacing the height of the container with max-height
When it comes to the explanation please have a look at this good answer. Here instead a solution to keep using the 100% percentage on the container keeping the intended ratio, which in our case gives:
JSFiddle
html,
body {
height: 100%;
}
.jobTitleDescCont {
display: flex;
height: 100%;
flex-flow: column nowrap;
border: yellowgreen solid 5px;
}
.jobTitle {
height: 30%;
font-size: 1em;
border: blue 5px solid;
}
.jobDesc {
height: 70%;
font-size: 2em;
border: green 5px solid;
overflow-y: auto;
}
<div class="jobTitleDescCont">
<div class="jobTitle">ciao</div>
<div class="jobDesc">ciao 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. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velitciao 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. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velitciao 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. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velitciao 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. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit</div>
</div>
According to caniuse.com, the scroll-padding-top property is supported in the latest version of Safari, but it just is not working for me at all. I setup a reduced example Code Pen here to confirm it is not anything else messing with it, even with just CSS and HTML it does not seem to work. This is the CSS:
html {
scroll-behavior: smooth;
scroll-padding-top: 152px;
}
I can confirm my version of Safari is 13.0.1 and support for this property was implemented in 11.0 according to caniuse.com.
It works as expected in both Firefox and Chrome.
Is there anything I am missing that needs to be included so this works in Safari? I want to avoid using jquery and javascript if possible, but I am open to implementing a solution using them if that is the only way.
The scroll-padding property is part of the CSS Scroll Snap Module. The most recent update to the module states that scroll-padding should work with all scroll containers. However, the original specification for scroll-padding required that it be used only with scroll snap containers, which is what is currently implemented in Safari (hence, why caniuse lists it as supported). Development of the new spec has not yet started for Safari (see WebKit bug).
However, you don't actually need scroll-padding to achieve an "offset" when linking to elements on your page. Instead, you can just apply padding-top to the linked element and then a corresponding negative value for margin-top so there's no change to the layout.
html {
scroll-behavior: smooth;
}
.glossary {
margin-bottom: 100px;
}
.glossary__link {
padding: 10px;
}
h3 {
padding-top: 152px;
margin-top: -152px;
}
<div class="glossary">
A
B
C
D
</div>
<hr>
<section>
<h3 id="a">A</h3>
<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>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</section>
<hr>
<section>
<h3 id="b">B</h3>
<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>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</section>
<hr>
<section>
<h3 id="c">C</h3>
<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>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</section>
<hr>
<section>
<h3 id="d">D</h3>
<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>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</section>
This question already has answers here:
What is the default padding and/or margin for a p element (reset css)?
(5 answers)
Closed 3 years ago.
I am learning how to use grid. I have set the grid-column-gap and grid-row-gap both to 10px but, as you can see, the two gaps appear of different sizes. Why is that?
I have tried to add margin:0 to the p as I have read this suggestion from previous threads. When I do so the grid-column-gap and grid-row-gap appear of the same size but the pink color of the main container disappears, why is that? Here the link to codepen https://codepen.io/Alicinetto/pen/NVqqmo
.container {
background: pink;
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
main>p {
background: #fff;
padding: 20px;
margin: 0;
}
<main class="container">
<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.</p>
<p>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>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit,</p>
<p>sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
quaerat voluptatem.</p>
</main>
That is because the <p> element has native top and bottom margins applied by the browser's default stylesheet. If you set margin: 0 on the <p> element then the issue will go away.
main>p {
background: #fff;
padding: 20px;
margin: 0;
}
If you want to retain some separation between the container and it's inner <p> elements, then set a 10px padding on .container:
.container {
background: pink;
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
padding: 10px;
}
main>p {
background: #fff;
padding: 20px;
margin: 0;
}
<main class="container">
<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.</p>
<p>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>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit,</p>
<p>sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
quaerat voluptatem.</p>
</main>
The paragraphs have margin on the bottom. If you add
p {
margin: 0;
}
the row gaps are the same.
My designer uses this technique in a lot of designs and I can't decide the best way of css'ing this so it's automagically fluid (as it's going into a cms)
Basically, when floating a 2column div structure I would like there to be a bottom border per div. I would put the border on a wrapping element but there needs to be a gap between the two divs (margin-right). The problem is that the two divs are different sizes depending on content. height:100% will not seem to do the trick (even when making the parent 100%). I need the two divs's borders to be level with each other.
Attached is some sample code pre any formatting css- only successful way I have been able to do this is by setting the height per container, which in this case will not work, needs to be fluid.
Thank you !!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>What's the best way?!</title>
<style type="text/css">
div.col50>div{width:45%; float:left; border-bottom:1px solid #000;}
div.col50>div+div{margin:0 0 0 5%;}
div.col50+div.col50{margin:50px 0 0;}
div.col50:before, div.col50:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
div.col50:after { clear: both; }
div.col50{zoom:1;}
</style>
</head>
<body>
<div class="col50">
<div>
<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>
</div>
<div>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
</div>
</body>
</html>
Try to make 3 <div>'s:
Left <div> with float:left;width:45%;margin-right:5%;
Right <div> with float:right;width:50%;
Bottom <div> with clear:both;width:100%;
Inside bottom <div> you can create two <div>'s with border (floated left and right).