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.
Related
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>
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.
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
Is there any way to have a scrollable div in a page where all the other contents are fixed but that div is scrollable by the window scrollbar instead of it's own scroll?
Thanks in advance
If you know what the dimensions of the fixed content are, i.e. the offset from the edges of the window to the edges of the scrolling content, then really all you need to do is put margins on the scrolling content. Then the fixed content is displayed in the margins, as it were.
html, body {
height: 100%;
margin: 0;
color: #000
}
header {
display: block;
position: fixed;
top: 0;
padding: 0 1em;
line-height: 3;
width: 100%;
background: #FBB
}
nav {
display: block;
position: fixed;
left: 0;
top: 3em;
bottom: 3em;
padding: 1em;
width: 7em;
background: #BBF
}
aside {
display: block;
position: fixed;
right: 0;
top: 3em;
bottom: 3em;
padding: 1em;
width: 7em;
background: #BFF
}
main {
display: block;
margin: 3em 9em 3em 9em;
padding: 1em;
background: #FFB
}
footer {
display: block;
position: fixed;
bottom: 0;
padding: 0 1em;
line-height: 3;
width: 100%;
background: #BFB
}
<header>This is the fixed header</header>
<nav>And the fixed nav bar.<br />
Go to top<br />
Go to bottom
</nav>
<aside>And the fixed sidebar.
<br />With some content.</aside>
<main>This is the scrolling content. 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.
<br />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?
<br />At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.<span id="bottom"></span>
</main>
<footer>And the fixed footer</footer>
I gave everything different colours to make it clear what the trick is, but you can give all the fixed containers the same background colour, naturally.
I'd like the text of my second column to start at the same level as the first paragraph of the first column (Lorem Ipsum text). Is it possible? Currently it starts at the same level as my H2 text which doesn't look good. Thanks
http://jsfiddle.net/Grek/znD9f/
<div class="article twocolumns">
<h2>Biography</h2>
<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>
<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>
<p><strong>LOREM IPSUM</strong></p>
</div>
CSS:
.twocolumns {
-webkit-column-count: 2; /* Safari and Chrome */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
.article {
float: right;
width: 400px;
padding: 60px 82px 49px 82px;
position: relative;
z-index: 15;
margin-top: 90px;
background: #fff;/* max-width: 23.5%; */
}
.article h1, .article h2 {
margin-top: -4px;
padding-bottom: 2px;
}
In that case you need to use the .twocolumns class to div that doesn't have your heading i.e. h2 element like this
<div class="article">
<h2>Biography</h2>
<div class="twocolumns">
<p>Lorem ipsum dolor sit amet,....
and reset the default margin and padding for p element to make it more clear.
p
{
margin:0;
padding:0;
}
So basically apply .twocolumns class to those element which you want to break into two columns. In your case you doesn't want to have heading in that. So exclude it from there and put it outside.
JS Fiddle
What about just moving your H2 tag outside of that div?
http://jsfiddle.net/enigmarm/znD9f/4/
Massage the CSS a bit to get it the way you want.
<h2 class="article">Biography</h2>
<div class="article twocolumns">
It is possible, take a look at this changed fiddle: http://jsfiddle.net/znD9f/2/
Tweak the HTML a little by moving the h2 out and wrapping the paragraphs in two columns.
<div class="article">
<h2>Biography</h2>
<div class="twocolumns">
<p> ... <p>
...
</div>
</div>
And tweak the CSS a little to align both columns:
.article p {
margin-top: 3px;
}
I hope that solves your problem. It works on your example at least.
It's not yet supported in Firefox, but the following should work in Chrome, Safari, Opera 11.1+, and IE10:
.article h1, .article h2 {
-webkit-column-span: all;
column-span: all;
}
For more information: https://developer.mozilla.org/en-US/docs/CSS/column-span.
And here's further information: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/an-introduction-to-the-css3-multiple-column-layout-module/.
Until this has broader browser support, just move the heading outside the .twocolumns div.