The following code results in the scrollbar not being clickable and/or draggable, and this happens arbitrarily in Chrome only.
Is there anything obvious in the code that's causing this?
- If so, how should be fixed?
- If not, how do I continue to troubleshoot it?
I tried working the Chrome debugger but clicking on the sidebar does not reveal anything useful.
html {
max-width: 780px;
margin: 0 auto;
}
body {
background-image:url('https://img.freepik.com/free-vector/retro-styled-pattern-background_1048-6593.jpg');
background-size: 116px;
background-repeat:repeat-x;
}
header {
display:flex;
flex-wrap: wrap;
justify-content:space-between;
align-items:center;
margin-bottom:23px;
}
#logo {
margin-left:15px;
}
#forum-link {
max-width:110px;
margin-right:35px;
}
#forum-link a{
color:white;
text-decoration:none;
font-weight:bold;
font-size:x-large;
}
footer
{
text-align:center;
font-size:small;
}
#media only screen and (orientation: portrait) {
html{
margin: 0;
height: 100%;
}
body{
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
header{
display: block;
width: 100%;
position: relative;
height: auto;
margin-bottom: 50px;
}
#logo {
margin:initial;
display:flex;
align-items: center;
justify-content:center;
}
#forum-link {
margin: initial;
max-width:initial;
background:#323232;
height: 27px;
position: absolute;
bottom: -50px;
width: 100%;
display:flex;
align-items: center;
justify-content:center;
}
#forum-link a{
font-weight:bold;
font-size:.9em;
}
#forum-link a:hover{
text-decoration:underline;
}
#content{
flex: 1;
margin: 0px 20px 0px 20px;
}
<body>
<header>
<div id="logo"><img src="http://placekitten.com/g/354/85" srcset="http://placekitten.com/g/354/85 1x, http://placekitten.com/g/354/85 2x" width="354" height="85"></div>
<div id="forum-link">Join our Forums!</div>
</header>
<div id="content">
<h1>Lorem Ipsum</h1>
<h2>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</h2>
<h3>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae aliquam mi. Nam in dictum nulla. Donec sit amet mollis nunc. Aliquam a elit quis felis finibus accumsan. Vivamus vel pellentesque mauris. Integer et commodo lectus. Donec fermentum urna ac lorem euismod fermentum. Aliquam porttitor, lacus id consectetur auctor, velit est mollis risus, iaculis aliquet massa massa in velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et semper orci, sed rhoncus purus. Cras rhoncus accumsan libero nec sagittis. Proin ac ipsum suscipit tortor tincidunt malesuada et at sapien. Morbi mollis ultricies lacus ut blandit.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque sagittis mi. Proin commodo tempor sem at euismod. Nam vel porta mauris. Nunc rutrum libero vitae dui tincidunt, eget condimentum mi semper. Cras gravida nunc vel pulvinar tempor. Nunc rhoncus rutrum justo, vel facilisis ex fringilla in. Sed posuere ex non eros ultrices varius.
<p>
Fusce vestibulum quis arcu ac dapibus. Maecenas felis ante, auctor sed congue ut, convallis a arcu. Nunc vel maximus quam. Nam mauris purus, commodo et leo vel, volutpat sollicitudin libero. Mauris porta lectus nibh, et suscipit ipsum condimentum elementum. Sed sem lectus, aliquet id condimentum id, maximus eget felis. Sed ornare augue libero, eget hendrerit sem porttitor vitae. Ut porttitor vehicula dapibus. Suspendisse at accumsan orci.
<p>
In ante eros, condimentum id elit quis, sagittis bibendum arcu. Phasellus in metus quam. Sed gravida condimentum mi sit amet molestie. Ut blandit tempus libero ut porta. Sed blandit sem eget mi rutrum, at lacinia risus efficitur. Duis rhoncus porta lacus, scelerisque scelerisque tellus sodales quis. Nunc maximus ex et placerat commodo. Curabitur quis bibendum tortor. Sed condimentum vel urna laoreet mollis. Quisque molestie orci sed sodales porttitor.
<p>
Morbi ipsum erat, varius eu eros id, porta vestibulum nulla. In mattis dolor nisi, ut luctus dolor cursus a. Phasellus tempor diam enim, a accumsan justo dignissim sit amet. Vestibulum congue, arcu non accumsan rutrum, tortor augue sodales lacus, eu fermentum leo odio eu nibh. Cras non urna non leo imperdiet varius. Vestibulum eget magna metus. Curabitur eu tempor magna.
</div>
<footer>
<div id="copyright">© Copyright text</div>
</footer>
</body>
</html>
Related
When centering the #outer div, the scrollbar starts not on the top left of the element but on the center. It becomes impossible to read the beginning of the text, and a part of the border is cut off.
How could I center and be able to scoll and see all content, including the border, when the content #outer is larger than the parent #container, using css?
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#container {
width: 100%;
height: 100%;
display: grid;
place-content: center;
}
#outer {
width: max-content;
border: 1rem solid black;
padding: 2rem;
}
#inner {
background-color: red;
}
<div id="container">
<div id="outer">
<div id="inner">The beginning of this text is missing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar ex ut volutpat iaculis. Mauris a tellus vel mauris ullamcorper semper quis non quam. Nullam in scelerisque dolor, vel cursus odio. Nulla dignissim imperdiet mauris eleifend ultricies. Sed auctor tortor nec neque mollis feugiat. Aliquam tincidunt lacus at dictum elementum. Aliquam nunc lacus, lobortis vitae finibus et, vehicula eget nibh. Suspendisse eget tincidunt quam. In posuere quam ac neque sagittis, at finibus ante dignissim. Proin magna enim, bibendum quis pulvinar eget, porttitor non dui. Sed mollis placerat sem, id condimentum libero tempor quis. Maecenas ultrices tellus vel nisi mattis, sit amet scelerisque urna gravida. Nullam eu ipsum vitae eros pulvinar fringilla id ut massa. Fusce vitae rhoncus nulla.</div>
</div>
</div>
This may be because of display:grid;
, because when I removed that, the content is showing itself fully.
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#container {
overflow-x:scroll;
width: 100%;
height: 100%;
place-content: center;
}
#outer {
width: max-content;
border: 1rem solid black;
padding: 2rem;
}
#inner {
background-color: red;
}
<div id="container">
<div id="outer">
<div id="inner">The beginning of this text is missing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar ex ut volutpat iaculis. Mauris a tellus vel mauris ullamcorper semper quis non quam. Nullam in scelerisque dolor, vel cursus odio. Nulla dignissim imperdiet mauris eleifend ultricies. Sed auctor tortor nec neque mollis feugiat. Aliquam tincidunt lacus at dictum elementum. Aliquam nunc lacus, lobortis vitae finibus et, vehicula eget nibh. Suspendisse eget tincidunt quam. In posuere quam ac neque sagittis, at finibus ante dignissim. Proin magna enim, bibendum quis pulvinar eget, porttitor non dui. Sed mollis placerat sem, id condimentum libero tempor quis. Maecenas ultrices tellus vel nisi mattis, sit amet scelerisque urna gravida. Nullam eu ipsum vitae eros pulvinar fringilla id ut massa. Fusce vitae rhoncus nulla.</div>
</div>
</div>
I don't know much about grid, but I think another fix might be the width;
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#container {
width:100%;
height: 100%;
display: grid;
place-content: center;
}
#outer {
width:100%;
border: 1rem solid black;
padding: 2rem;
}
#inner {
background-color: red;
}
<div id="container">
<div id="outer">
<div id="inner">The beginning of this text is missing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar ex ut volutpat iaculis. Mauris a tellus vel mauris ullamcorper semper quis non quam. Nullam in scelerisque dolor, vel cursus odio. Nulla dignissim imperdiet mauris eleifend ultricies. Sed auctor tortor nec neque mollis feugiat. Aliquam tincidunt lacus at dictum elementum. Aliquam nunc lacus, lobortis vitae finibus et, vehicula eget nibh. Suspendisse eget tincidunt quam. In posuere quam ac neque sagittis, at finibus ante dignissim. Proin magna enim, bibendum quis pulvinar eget, porttitor non dui. Sed mollis placerat sem, id condimentum libero tempor quis. Maecenas ultrices tellus vel nisi mattis, sit amet scelerisque urna gravida. Nullam eu ipsum vitae eros pulvinar fringilla id ut massa. Fusce vitae rhoncus nulla.</div>
</div>
</div>
But I don't know if you want it on separate lines.
The problem is when I shrink the page to a certain point, the top of the <p> elements overflow, weirdly not the bottom. To be clear, I want neither to overflow.
Here's a JSFiddle link to it: https://jsfiddle.net/maep468x/1
You will see that when you run it and shrink the result window to about 350px, the <p> elements start overflowing.
I've tried removing my line-height and font-size properties from the .main-content rule, but it still overflows.
I'll put the code here aswell just in case
<main>
<div id="header-container">
<h1>My Life</h1>
</div>
<div class="main-container">
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
<div class="img-container"><img src="../img/background-3062024.jpg" alt="starry night sky" /></div>
</div>
<div class="main-container" id="right-side">
<div class="img-container"><img src="../img/bali-2975787.jpg" alt="Bali beach sunset" /></div>
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
</div>
<div class="main-container">
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
<div class="img-container"><img src="../img/bali-1514132_1920.jpg" alt="bali ricefield" /></div>
</div>
</main>
main {
background-color: rgba(0, 128, 0, 0.5);
}
#header-container {
display: flex;
width: 100%;
height: 200px;
justify-content: center;
align-items: center;
font-size: calc(5px + 2vw);
border-bottom: 2px solid #000;
background-image: url("../img/panoramic-3358822_1920.jpg");
background-size: cover;
text-shadow: 0.5px 0.25px 2px #d49522;
}
.main-container {
display: flex;
height: fit-content();
}
.main-content {
display: flex;
height: 400px;
font-family: Georgia;
font-size: calc(10px + 0.5vw);
line-height: 24px;
overflow-y: scroll;
padding: 10px;
background-color: rgba(0, 128, 0, 0.25);
}
.img-container {
min-width: 600px;
}
.img-container img {
max-width: 100%;
height: auto;
}
#media only screen and (max-width: 930px) {
.main-container {
flex-wrap: wrap;
}
.main-content {
align-items: center;
}
}
Change property align-items from align-items: center; to align-items: flex-start; and set height: auto for mobile screens.
main {
background-color: rgba(0, 128, 0, 0.5);
}
#header-container {
display: flex;
width: 100%;
height: 200px;
justify-content: center;
align-items: center;
font-size: calc(5px + 2vw);
border-bottom: 2px solid #000;
background-image: url("../img/panoramic-3358822_1920.jpg");
background-size: cover;
text-shadow: 0.5px 0.25px 2px #d49522;
}
.main-container {
display: flex;
height: fit-content();
}
.main-content {
display: flex;
height: 400px;
font-family: Georgia;
font-size: calc(10px + 0.5vw);
line-height: 24px;
overflow-y: scroll;
padding: 10px;
background-color: rgba(0, 128, 0, 0.25);
}
.img-container {
min-width: 600px;
}
.img-container img {
max-width: 100%;
height: auto;
}
#media only screen and (max-width: 930px) {
.main-container {
flex-wrap: wrap;
}
.main-content {
align-items: flex-start;
height: auto;
}
}
<main>
<div id="header-container">
<h1>My Life</h1>
</div>
<div class="main-container">
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
<div class="img-container"><img src="../img/background-3062024.jpg" alt="starry night sky" /></div>
</div>
<div class="main-container" id="right-side">
<div class="img-container"><img src="../img/bali-2975787.jpg" alt="Bali beach sunset" /></div>
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
</div>
<div class="main-container">
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
<div class="img-container"><img src="../img/bali-1514132_1920.jpg" alt="bali ricefield" /></div>
</div>
</main>
I am using a 1400px header (the size of the width of my image). Because of my header my following text is not displayed instead of my page
body {
background-color: blue;
}
.infos {
display: flex;
justify-content: center;
color: white;
}
header {
width: 1400px;
height: 787px;
background-color: black;
}
<link href="https://unpkg.com/tailwindcss#%5E1.0/dist/base.min.css" rel="stylesheet" />
<header></header>
<div class="infos">
<p>soremm ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi mauris, lobortis eu rutrum in, tempor ac turpis. Donec hendrerit finibus leo vel iaculis. Suspendisse pretium sapien justo, at pulvinar elit egestas eu. Sed accumsan, lacus ac pharetra
iaculis, lorem nisl eleifend tellus, varius feugiat mauris leo sit amet nibh. Cras consectetur dictum ligula et interdum. Nulla facilisi. Sed eget erat a neque varius feugiat. Vivamus fermentum dapibus leo non convallis. Donec non purus quam. Etiam
ut turpis libero. Morbi ex orci, consequat pulvinar urna ac, blandit ultrices mi</p>
</div>
I tried flex, text align. Nothing to do I can not center my text in the middle of my page
Is this what you had in mind?
body {
background-color: blue;
}
.infos {
display: flex;
justify-content: center;
color: white;
width:1400px;
margin:0 auto;
}
header {
width: 1400px;
height: 787px;
background-color: black;
margin:0 auto;
}
<link href="https://unpkg.com/tailwindcss#%5E1.0/dist/base.min.css" rel="stylesheet" />
<header></header>
<div class="infos">
<p>soremm ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi mauris, lobortis eu rutrum in, tempor ac turpis. Donec hendrerit finibus leo vel iaculis. Suspendisse pretium sapien justo, at pulvinar elit egestas eu. Sed accumsan, lacus ac pharetra
iaculis, lorem nisl eleifend tellus, varius feugiat mauris leo sit amet nibh. Cras consectetur dictum ligula et interdum. Nulla facilisi. Sed eget erat a neque varius feugiat. Vivamus fermentum dapibus leo non convallis. Donec non purus quam. Etiam
ut turpis libero. Morbi ex orci, consequat pulvinar urna ac, blandit ultrices mi</p>
</div>
justify-content only has an effect if there's space left over after your flex items have flexed to absorb the free space. It doesn't align the text itself.
Change justify-content:center; to text-align:center;
For more info check out this answer
If you want to center every line of text to the center of parent element use
text-align: center
body {
background-color: blue;
}
header {
width: 1400px;
height: 787px;
background-color: black;
}
.infos {
text-align: center;
}
<link href="https://unpkg.com/tailwindcss#%5E1.0/dist/base.min.css" rel="stylesheet" />
<header></header>
<div class="infos">
<p>soremm ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi mauris, lobortis eu rutrum in, tempor ac turpis. Donec hendrerit finibus leo vel iaculis. Suspendisse pretium sapien justo, at pulvinar elit egestas eu. Sed accumsan, lacus ac pharetra
iaculis, lorem nisl eleifend tellus, varius feugiat mauris leo sit amet nibh. Cras consectetur dictum ligula et interdum. Nulla facilisi. Sed eget erat a neque varius feugiat. Vivamus fermentum dapibus leo non convallis. Donec non purus quam. Etiam
ut turpis libero. Morbi ex orci, consequat pulvinar urna ac, blandit ultrices mi</p>
</div>
Simplest way to center a div use using margin: auto
body {
background-color: blue;
}
header {
width: 1400px;
height: 787px;
background-color: black;
}
.infos {
width: 50%;
margin: auto;
}
<link href="https://unpkg.com/tailwindcss#%5E1.0/dist/base.min.css" rel="stylesheet" />
<header></header>
<div class="infos">
<p>soremm ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi mauris, lobortis eu rutrum in, tempor ac turpis. Donec hendrerit finibus leo vel iaculis. Suspendisse pretium sapien justo, at pulvinar elit egestas eu. Sed accumsan, lacus ac pharetra
iaculis, lorem nisl eleifend tellus, varius feugiat mauris leo sit amet nibh. Cras consectetur dictum ligula et interdum. Nulla facilisi. Sed eget erat a neque varius feugiat. Vivamus fermentum dapibus leo non convallis. Donec non purus quam. Etiam
ut turpis libero. Morbi ex orci, consequat pulvinar urna ac, blandit ultrices mi</p>
</div>
I have 3 div, 2 are floating left and the other floating right. However it is not aligning in the way I want.
.numb1, .numb2 {
float: left;
width: 60%;
display: inline-block;
}
.numb3, .numb4 {
float: right;
width: 35%;
display: inline-block;
}
Here is a snippet so you have an idea of what problem; https://jsfiddle.net/rnty32gt/
I want the class numb3 to be aligned with numb1. I tried to use inlineblock but it is not working. Sorry for my English.
Make this way using this css and html
.numb2 ,.numb3 {
padding: 0;
text-align: left;
border: 1px solid #c4c4c4;
margin: 5px 0;
background: linear-gradient(180deg,#fff 0,#e6e6e6);
}
.numb1 {
float: left;
width: 60%;
}
.numb3 {
float: right;
width: 35%;
}
<!DOCTYPE html>
<html>
<body>
<h1>The float Property</h1>
<div class="numb1">
<div class="numb2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.
</div><div class="numb2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.
</div></div><div class="numb3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>
</body>
</html>
This is how you could do it to have it fixed as you wish. But you could also use flex-box. Here is some info about flex-box: https://www.w3schools.com/css/css3_flexbox.asp
div {
padding: 0;
text-align: left;
border: 1px solid #c4c4c4;
margin: 5px 0;
background: linear-gradient(180deg,#fff 0,#e6e6e6);
}
.numb1, .numb2 {
float: left;
width: 60%;
}
.numb3 {
float: right;
width: 35%;
}
<h1>The float Property</h1>
<div class="numb1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.
</div>
<div class="numb3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>
<div class="numb2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.
</div>
So as you can see i have changed the order of div2 and div3 in your HTML.
There you go.
div {
padding: 0;
text-align: left;
border: 1px solid #c4c4c4;
margin: 5px 0;
background: linear-gradient(180deg,#fff 0,#e6e6e6);
}
.wrap-l
{
margin:0px;
float: left;
width: 60%;
border:none;
}
.numb1, .numb2 {
}
.numb3 {
float: right;
width: 35%;
}
<div class="wrap-l">
<div class="numb1">
Text 1
</div>
<div class="numb2">
Text 2
</div>
</div>
<div class="numb3">
Text 3
</div>
give width: 30%; for numb1 and numb 2
If you want to use floats, just put the .numb3 above the other divs in your markup : https://jsfiddle.net/5vbvjwcs/
Otherwise you can use flex :
section {
display: flex;
}
.leftColumn {
width: 60%;
}
.content {
padding: 10px;
background-color: #eaeaea;
margin: 10px;
flex: 1;
}
<section>
<div class="leftColumn">
<div class="content">
Numb1
</div>
<div class="content">
Numb2
</div>
</div>
<div class="content">
Numb3
</div>
</section>
Doe,
If you want div.numb3 align with div.numb1 you should change the order like this:
div {
padding: 0;
text-align: left;
border: 1px solid #c4c4c4;
margin: 5px 0;
background: linear-gradient(180deg,#fff 0,#e6e6e6);
}
.numb1, .numb2 {
float: left;
width: 60%;
}
.numb3 {
float: right;
width: 35%;
}
<!DOCTYPE html>
<html>
<body>
<h1>The float Property</h1>
<div class="numb1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.
</div>
<div class="numb3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>
<div class="numb2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.
</div>
</body>
</html>
I have an outer div with a background image that needs to contain it's shape at all times cause of it's odd shape (so it doesn't fall out of sight). In that shape I have a text div that is scrollable vertically. This text block needs to stay in the background shape with 20px margin at all times.
The problem is it scales weird so the text block falls out of the shape.
Here is the code:
.textblock
{
width: 70%;
float: left;
height: 60vh;
}
.text_outer
{
background-image:url(../img/text_background.png);
background-size: contain;
background-repeat: no-repeat;
background-position:right;
height:100%;
padding:15px;
}
.text_inner
{
background-color: #fff;
border-radius: 10px;
width: 85%;
float: right;
padding: 20px;
height: 94%;
overflow:auto;
position:relative;
}
<div class="textblock">
<div class="text_outer">
<div class="text_inner">
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin ac nisl in commodo. Suspendisse elit dolor, ornare id placerat quis, pretium quis massa. Morbi magna sapien, convallis at neque eu, mattis scelerisque nulla. Sed eget blandit diam. Ut gravida nibh vitae nunc accumsan tristique. Duis vitae quam eleifend, ultrices eros nec, viverra ligula. Sed tincidunt luctus congue. Nulla facilisi. Morbi scelerisque, velit sed fermentum pellentesque, massa tortor accumsan libero, vitae suscipit nisi ex id quam. Suspendisse elit elit, maximus at dolor sit amet, vulputate aliquam lacus. Nulla non diam nunc. Duis eget suscipit tortor.
<br><br>
Vivamus arcu purus, gravida eu venenatis vitae, pulvinar ac tortor. Mauris quis velit dictum, ultrices justo ut, facilisis ante. Duis convallis feugiat est sed efficitur. Ut id pretium elit. Maecenas venenatis rhoncus porttitor. Fusce dapibus sed arcu vel maximus. In hac habitasse platea dictumst. Sed vulputate ornare dolor, eget condimentum ligula pulvinar tincidunt. Vestibulum leo ex, ultricies id sagittis quis, dapibus dapibus odio. Aenean sodales ligula in est posuere auctor. Aliquam tristique elementum pharetra. Integer vitae tortor aliquam, venenatis dolor sit amet, pretium nisi.
</p>
</div>
</div>
</div>
if I have understood correctly you should using position absolute and relative for div
try like so:
.outer{
position:Relative;
background:blue;
height:200px;
width:200px;
}
.inner{
position:absolute;
height:100%;
width:100%;
background:Red;
overflow: scroll;
}
https://jsfiddle.net/ngh99ura/4/
I can't see your image, but as far as I see you need make background-size: cover in .text-outer and to delete padding in the .text-inner. Something like this:
.text_outer
{
background-image:url('../img/text_background.png');
background-size: cover;
background-repeat: no-repeat;
background-position:right;
height:100%;
padding:15px;
}
.text_inner
{
background-color: #fff;
border-radius: 10px;
width: 85%;
float: right;
height: 94%;
overflow:auto;
position:relative;
}
Try below codes, make your background-size as 100% 100%, you have used padding in both .textinner and .textouter class and that's why background-image, bottom side was not visible.
.textblock
{
width: 70%;
float: left;
height: 60vh;
}
.text_outer
{
background-image:url("https://source.unsplash.com/random");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position:top;
width:100%;
height:100%;
padding:15px;
}
.text_inner
{
background-color: #fff;
border-radius: 10px;
width: 85%;
padding: 10px;
height: 94%;
overflow:auto;
position:relative;
margin:auto;
}
<div class="textblock">
<div class="text_outer">
<div class="text_inner">
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin ac nisl in commodo. Suspendisse elit dolor, ornare id placerat quis, pretium quis massa. Morbi magna sapien, convallis at neque eu, mattis scelerisque nulla. Sed eget blandit diam. Ut gravida nibh vitae nunc accumsan tristique. Duis vitae quam eleifend, ultrices eros nec, viverra ligula. Sed tincidunt luctus congue. Nulla facilisi. Morbi scelerisque, velit sed fermentum pellentesque, massa tortor accumsan libero, vitae suscipit nisi ex id quam. Suspendisse elit elit, maximus at dolor sit amet, vulputate aliquam lacus. Nulla non diam nunc. Duis eget suscipit tortor.
<br><br>
Vivamus arcu purus, gravida eu venenatis vitae, pulvinar ac tortor. Mauris quis velit dictum, ultrices justo ut, facilisis ante. Duis convallis feugiat est sed efficitur. Ut id pretium elit. Maecenas venenatis rhoncus porttitor. Fusce dapibus sed arcu vel maximus. In hac habitasse platea dictumst. Sed vulputate ornare dolor, eget condimentum ligula pulvinar tincidunt. Vestibulum leo ex, ultricies id sagittis quis, dapibus dapibus odio. Aenean sodales ligula in est posuere auctor. Aliquam tristique elementum pharetra. Integer vitae tortor aliquam, venenatis dolor sit amet, pretium nisi.
</p>
</div>
</div>
</div>