I have an issue on a test web-page i'm creating for practice where i have two div elements one above the other, however the top one (.item in the CSS) is 'under lapping' the bottom one (.wide and .img-span in the css) and sticks out on the other-side for some reason. I have fiddled around with my CSS and HTML for a while and i cant fix it.
CSS:
.item {
padding-left: 20%;
padding-right: 20%;
padding-top: 4px;
padding-bottom: 4px;
overflow: hidden;
margin: 0;
}
.item p {
font-size: 18px;
}
.img-span {
padding: 0;
margin: 0;
width: 100%;
}
.wide {
width: 100%;
height: 100%;
opacity: 1;
overflow: hidden;
}
HTML:
<div id="first" class="item">
<p class="para">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime distinctio sed officia, nam iure quam necessitatibus nobis non, aut quaerat autem. Quam mollitia, fugiat amet veritatis, voluptate earum quidem et! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci ex earum impedit ipsum consequatur dolor doloremque eum. Sed fugit dolor maiores pariatur nesciunt iste cupiditate consequuntur, dolore alias numquam voluptatum!
</p>
</div>
<div id="img-span">
<img src="img/board-911636.jpg" class="wide">
</div>
Setting display: block on the img fixes your problem.
Related
Currently my scrollbar is stuck to the border of the div (which has an overflow: "scroll" property) and changing the margin or padding of the scrollbar doesn't do anything. The scrollbar also shouldn't be as tall as the div itself, like 80% of it, but changing the height of it also doesn't work.
Below are pictures of what I'm going for and what it looks like currently and also the CSS styles that are currently on the scrollbar:
.container::-webkit-scrollbar-track {
border-radius: 10px;
background-color: var(--white50);
}
.container::-webkit-scrollbar {
width: 12px;
background-color: transparent;
}
.container::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: var(--white);
}
You can't move the position of the scrollbar, but you can create an inner container to show the scrollbar in it. So you can have padding you want.
.container {
height: 200px;
width: 300px;
overflow: hidden;
background-color: lightgray;
padding: 20px;
}
.inner-container {
background-color: lightgray;
overflow-y: scroll;
height: 100%;
}
.inner-container::-webkit-scrollbar-track {
border-radius: 10px;
background-color: lightsalmon;
}
.inner-container::-webkit-scrollbar {
width: 12px;
background-color: transparent;
}
.inner-container::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: white;
}
<div class="container">
<div class="inner-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla eum minus adipisci, illo eius praesentium ducimus sit amet ipsam. Odio nostrum magni quia maxime quibusdam error facilis laudantium animi quam. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nulla eum minus adipisci, illo eius praesentium ducimus sit amet ipsam. Odio nostrum magni quia maxime quibusdam error facilis laudantium animi quam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla eum minus adipisci, illo
eius praesentium ducimus sit amet ipsam. Odio nostrum magni quia maxime quibusdam error facilis laudantium animi quam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla eum minus adipisci, illo eius praesentium ducimus sit amet ipsam.
Odio nostrum magni quia maxime quibusdam error facilis laudantium animi quam.
</p>
</div>
</div>
I am trying to make my image cover the whole div which is 50% of the parent div. I used object-fit:cover but it's still not working. The problem is as I reduce the width of window the image also shortens.
In (1) the width is full
The 2nd picture is 900px window size.
* {
box-sizing: border-box;
}
body {
background: yellow;
}
section {
background: red;
widtth: 100%;
min-height: 700px;
}
article {
background: green;
width: 50%;
min-height: 700px;
padding: 100px;
float: left;
}
picture {
float: left;
width: 50%;
min-height: 700px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
section::after {
content: "";
clear: both;
display: block;
}
<body>
<section class="about">
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur expedita laudantium, ea eos fugiat dolores laboriosam voluptas illo deleniti pariatur ratione nobis perferendis in consectetur rerum ipsa debitis quis numquam! Lorem ipsum dolor
sit amet consectetur adipisicing elit. Veniam unde placeat ratione magnam tempore velit accusamus ipsam quaerat aspernatur maiores?</p>
</article>
<picture>
<img src="https://www.loveinartsz.com/wp-content/uploads/2021/03/b04803919effa1914ae6754d8bee30fb.jpg" alt="">
</picture>
</section>
</body>
I have linked the code pen link below for reference.
https://codepen.io/YASH_KR18/pen/LYObNrB
Simple solution, add display:flex to its parent element which is picture will make it work.
* {
box-sizing: border-box;
}
body {
background: yellow;
}
section {
background: red;
width: 100%;
min-height: 700px;
}
article {
background: green;
width: 50%;
min-height: 700px;
padding: 100px;
float: left;
}
picture {
float: left;
width: 50%;
min-height: 700px;
display:flex
}
img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
section::after {
content: "";
clear: both;
display: block;
}
<body>
<section class="about">
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur expedita laudantium, ea eos fugiat dolores laboriosam voluptas illo deleniti pariatur ratione nobis perferendis in consectetur rerum ipsa debitis quis numquam! Lorem ipsum dolor
sit amet consectetur adipisicing elit. Veniam unde placeat ratione magnam tempore velit accusamus ipsam quaerat aspernatur maiores?</p>
</article>
<picture>
<img src="https://www.loveinartsz.com/wp-content/uploads/2021/03/b04803919effa1914ae6754d8bee30fb.jpg" alt="">
</picture>
</section>
</body>
Because you are using the extra picture tag for that
I am avoiding that tag because I see no need of that in this whole code. If you want to use the picture tag vary badly we have to think of something else. Here take a look:
HTML
<body>
<section class="about">
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur expedita laudantium, ea eos fugiat dolores laboriosam voluptas illo deleniti pariatur ratione nobis perferendis in consectetur rerum ipsa debitis quis numquam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam unde placeat ratione magnam tempore velit accusamus ipsam quaerat aspernatur maiores?</p>
</article>
<img src="https://www.loveinartsz.com/wp-content/uploads/2021/03/b04803919effa1914ae6754d8bee30fb.jpg" alt="">
</section>
</body>
CSS
*{
box-sizing:border-box;
}
body{
background:yellow;
}
section{
background:red;
widtth:100%;
min-height:700px;
}
article{
background:green;
width:50%;
min-height:700px;
padding:100px;
float:left;
}
img{
float:left;
width:50%;
min-height:700px;
}
section::after{
content:"";
clear:both;
display:block;
}
Floating elements (removing them from the normal flow of the html structure) is the source of a lot of problems. If you would use a flexbox or gridbox for the parent element then there would be no need to float the children to position them next to eachother and then I believe your problem is solved. Well that is if the snippet below does what you're after at least! If not I might not understand your question yet.
/* Colors for visibilty */
body{ background-color: yellow;}
article{ background-color: green; padding: 100px;}
picture{ background-color: red; }
/* The problem fix*/
section
{
display: grid;
grid-template-columns: 50% 50%;
width: 80%;
max-width: 1100px;
min-height: 700px;
margin: auto;
}
picture img{
object-position: center;
object-fit: cover;
width: 100%;
height: 100%;
}
<section>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur expedita laudantium, ea eos fugiat dolores laboriosam voluptas illo deleniti pariatur ratione nobis perferendis in consectetur rerum ipsa debitis quis numquam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam unde placeat ratione magnam tempore velit accusamus ipsam quaerat aspernatur maiores?</p>
</article>
<picture>
<img src="https://www.loveinartsz.com/wp-content/uploads/2021/03/b04803919effa1914ae6754d8bee30fb.jpg" alt="">
</picture>
</section>
I have an image (inner-img) inside a div with padding (inner-div) and I need to make this image to fit the outside div (main-div). I tried to use negative margin but is not working. Any light?
.main-div {
width: 500px;
background: yellow;
}
.inner-img {
max-width: 100%;
}
.inner-div {
padding: 20px;
}
<div class="main-div">
<div class="inner-div">
<img class="inner-img" src="https://plainbackground.com/plain1024/60b13b.png" alt="">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia veniam fugiat et accusamus iusto quos beatae eum, corrupti odit animi porro adipisci quasi eligendi error non cumque ex ut quod.</p>
</div>
</div>
If you can't change your markup, you can use negative margin on .inner-img so that the image breaks out of .inner-div
.main-div {
width: 500px;
background: yellow;
}
.inner-img {
max-width: calc(100% + 40px);
margin-top: -20px;
margin-left: -20px;
margin-right: -20px;
}
.inner-div {
padding: 20px;
}
<div class="main-div">
<div class="inner-div">
<img class="inner-img" src="https://plainbackground.com/plain1024/60b13b.png" alt="">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia veniam fugiat et accusamus iusto quos beatae eum, corrupti odit animi porro adipisci quasi eligendi error non cumque ex ut quod.</p>
</div>
</div>
I Moved the img out of the inner div and placed it in the outer div. Doing this allows the img to expand to the constraints of it's parent which is now .main-div:
This may not work for your use case but thought it worth mentioning.
.main-div {
width: 500px;
background: yellow;
}
.inner-img {
width: 100%;
}
.inner-div {
padding: 20px;
}
<div class="main-div">
<img class="inner-img" src="https://plainbackground.com/plain1024/60b13b.png" alt="">
<div class="inner-div">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia veniam fugiat et accusamus iusto quos beatae eum, corrupti odit animi porro adipisci quasi eligendi error non cumque ex ut quod.</p>
</div>
</div>
I'm a beginner Web Developer and I've recently started using Flexbox.
I find it is a great tool to use however I have a slight problem.
I have an image I want to put on my site, with a column of text beside it to the right.
As you can see from the code below I have created a wrapper div, with two nested divs inside it.
I have set the display attribute to 'flex' in the wrapper div and set the flex property to '1' for both of the divs inside. I thought this would make both of my divs take up 50% of the space each, but instead it seems like the image takes up more space than it should.
I've used an example image from Pexels. I'm wondering if the actual size of the raw image has an affect on this? For example do I have to manually resize all my photos before putting them on a site, or is there a way to have the image take up 50% of the width at all times, while having the text take up the other 50%, using flexbox?
Sorry if this post is hard to understand. Appreciate your help!
.wrapper
{
display: flex;
border: 3px solid red;
}
.image-div
{
flex: 1;
}
.text-div
{
flex: 1;
}
<div class="wrapper">
<div class="image-div">
<img src="https://images.pexels.com/photos/4403924/pexels-photo-4403924.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
</div>
<div class="text-div">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati.</p>
</div>
</div>
Try this:
.wrapper {
display: flex;
border: 3px solid red;
}
.image-div {
flex: 1;
background-color: red;
width: 100%;
}
.image-div>img {
width: 100%;
}
.text-div {
flex: 1;
background-color: yellow;
width: 100%;
}
<div class="wrapper">
<div class="image-div">
<img src="https://images.pexels.com/photos/4403924/pexels-photo-4403924.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
</div>
<div class="text-div">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati.
</p>
</div>
</div>
You just have to set the width of the image-div and the text-div to 100%. This way, they will take 50% of the screen width.
Next, we have to set the width of the image inside the image-div to 100%. This way, it will take the whole width of it's parent div. And the same will be for the text div.
Hope it helps
Adding image width in your CSS fixes the issue:
.image-div img { width: 100%; }
You need to set a max-width and height for your image like this:
.image-div img {
max-width: 100%;
max-height: 100%;
}
Heres the example:
.wrapper
{
display: flex;
border: 3px solid red;
}
.image-div
{
flex: 1;
}
.image-div img {
max-width: 100%;
max-height: 100%;
}
.text-div
{
flex: 1;
}
<div class="wrapper">
<div class="image-div">
<img src="https://images.pexels.com/photos/4403924/pexels-photo-4403924.jpeg?cs=srgb&dl=silhouette-of-mountain-under-cloudy-sky-during-sunset-4403924.jpg&fm=jpg">
</div>
<div class="text-div">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati.</p>
</div>
</div>
Set your image as position: absolute, stretched to the full extent of it's parent DIV element, and use object-fit to adapt the actual image to a desired value like contain or cover.
Doing so the image will adapt to the area which size is dictated by the text content in the other flex: 1 DIV element:
.wrapper {
display: flex;
border: 3px solid red;
}
.wrapper>* {
position: relative;
flex: 1;
}
.image-div img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="wrapper">
<div class="image-div">
<img src="//placehold.it/300x400&text=Some+image">
</div>
<div class="text-div">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati.</p>
</div>
</div>
I have been trying to learn CSS from the book by Jon Duckett.
I'm learning the concepts of positioning and floats. When I tried to implement them,
<head>
<title>Try</title>
<style type="text/css">
div#container {
width: 400px;
height: 400px;
padding: 5px;
}
div#cont_2 {
width: 800px;
padding: 0px 5px;
right: 7%;
position: absolute;
top: 10px;
}
p {
width: 300px;
}
p#right {
float: right;
}
p#clear {
clear: right;
}
p#cont_2_p {
width: 700px;
}
</style>
</head>
<body>
<div id="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam nobis aliquam nihil quas soluta nemo ad magnam animi! Veritatis, magnam, vero, pariatur ducimus quibusdam ad sint nostrum architecto natus asperiores odio eum doloremque excepturi expedita veniam tenetur esse sapiente est unde molestiae error et dignissimos dolorem? Rem quas eius nesciunt repellat assumenda temporibus cumque aperiam.
</p>
<p id="right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, sint, soluta ab explicabo labore vero placeat porro fugit tempore dolore deleniti libero sit quod reprehenderit.
</p>
<p id="clear">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, ullam.
</p>
</div>
<div id="cont_2">
<p id="cont_2_p">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, distinctio, asperiores, maxime amet quidem doloribus repudiandae tenetur quod odio laborum at hic nemo eaque! Vero.
</p>
<p id="cont_2_p">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, dolorum, tempore, eveniet distinctio repellendus perspiciatis modi enim saepe officia voluptatem recusandae sed voluptas molestias itaque eius ex reiciendis voluptatum consequuntur architecto molestiae quos esse eaque minima minus velit dolore in voluptate qui vel sequi provident?
</p>
</div>
</body>
or this: http://jsfiddle.net/7qYYT/
it worked well on 100% zoom on a browser but when I zoomed in, the text on the right overlaps the text on the left. How do I overcome it?
It is because of position absolute of div#cont_2
The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.
div#cont_2 {
width: 600px;
padding: 0px 5px;
float: right;
right: 7%;
/*position:absolute;*/
top: 10px;
}
And here you have set top:10px that sets the top of this div from 10px of parent element. That make overlapping of the other contents.
And of-course please used class instead of id selector in css. If you want to reuse that. As Id selector should be unique in the markup.
Js Fiddle
Two possible approaches:
Instead of setting a fixed width with pixels, set a relative width for the two containers using percentages:
div#container {
width: 33.333%;
height: 400px;
padding: 5px;
}
div#cont_2 {
width: calc(66.667% - 10px); // taking padding into account, but this won't work IE<=8
padding: 0 5px;
right: 7%;
position: absolute;
top: 10px;
}
Use floats instead of positioning (with relative width, again):
div#container {
float: left;
width: 33.333%;
height: 400px;
padding: 5px;
}
div#cont_2 {
float: right;
width: calc(66.667% - 10px);
padding: 0 5px;
}
There are other less supported methods as well, such as flex-box.
(BTW, don't use 0px; just use 0.)