The second div stacks on top of the first div and the first div invisible
How can i position it below the first div
.shop {
width: 100%;
height: 1000px;
background-color: #ffffff;
position: relative;
justify-content: center;
display: flex;
}
.bell {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
<div class="shop"></div>
<div class="bell">
<img src="bell.png" alt="">
</div>
Is this what you are trying to do ? :)
.shop {
width: 100%;
height: 1000px;
background-color: #000;
justify-content: center;
display: flex;
}
.bell {
background-color: red;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
img{
width : 30%;
}
<div class="shop"></div>
<div class="bell">
<img src="https://images.pexels.com/photos/1289845/pexels-photo-1289845.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
</div>
Related
I want to make a image (inside a div) to the most left of the bottom div and I don't how to do this.
For example I have this image
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.applicationimage {
width: 60px;
height: 60px;
border-radius: 100%;
}
.settings {
display: flex;
width: 80%;
height: 40rem;
background-color: white;
align-self: center;
}
<main>
<div class="container">
<div class="applicationinfo">
<img src="https://wallup.net/wp-content/uploads/2019/09/1667-beautiful-gray-cat-748x468.jpg" class="applicationimage">
</div>
<div class="settings">
<span>hi</span>
</div>
</div>
</main>
I'm new to html & css so I will appreciate your help making this image to the most left of his bottom div.
If you know the width of the div, it's easy. You can give the .applicationinfo element align-self: flex-start; and margin-left: 10%; (10% is calculated by this formula: (100% - widthOfDiv) / 2)
body {
background: black;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.applicationinfo {
align-self: flex-start;
margin-left: 10%;
}
.applicationimage {
width: 60px;
height: 60px;
border-radius: 100%;
}
.settings {
display: flex;
width: 80%;
height: 40rem;
background-color: white;
align-self: center;
}
<main>
<div class="container">
<div class="applicationinfo">
<img src="https://wallup.net/wp-content/uploads/2019/09/1667-beautiful-gray-cat-748x468.jpg" class="applicationimage">
</div>
<div class="settings">
<span>hi</span>
</div>
</div>
</main>
remove the flex direction, here's it
display: flex;
justify-items: flex-end;
align-items: flex-end;}
You can do it by positioning applicationinfo since you haven't styled it.
you can add parent position: relative; then child to absolute; then give child top: 0; left: 0;
.container {
display: flex;
height: 80vh;
flex-direction: column;
align-items: center;
justify-content: center;
align-items: center;
position: relative;
background: #222;
border: 1px solid yellow;
}
.applicationinfo {
width: 80%;
top: 0;
left: 0;
border: 1px solid green;
}
.applicationimage {
width: 60px;
height: 60px;
border-radius: 100%;
border: 1px solid blue;
}
.settings {
display: flex;
width: 80%;
height: 80%;
background-color: white;
align-self: center;
}
<div class="container">
<div class="applicationinfo">
<img src="https://wallup.net/wp-content/uploads/2019/09/1667-beautiful-gray-cat-748x468.jpg" class="applicationimage">
</div>
<div class="settings">
<span>hi</span>
</div>
</div>
I have a main container that contains an image and a div. What I want to achieve is to center the div on top of the image without having to use absolute or relative positioning on it. How can I achieve this? Thanks in advance.
.imgCon {
display: flex;
width: 95%;
height: 95%;
margin: auto;
background-color: blue;
}
.imgCon img {
width: 95.5%;
height: 95%;
margin: auto;
border-radius: inherit;
}
.iconCon {
display: flex;
justify-content: center;
align-items: center;
width: 30%;
height: 30%;
margin: auto;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
}
<div class="imgCon">
<!--center this-->
<div class="iconCon">
C
</div>
<img src="https://www.vitalground.org/wp-content/uploads/2021/11/Bart-the-Bear-II--e1637176991443.jpg" />
</div>
The only way I can think of without using absolute positioning or changing your markup is to use a CSS Grid and make both elements occupy the same cell.
.imgCon {
display: flex;
width: 95%;
height: 95%;
margin: auto;
background-color: blue;
display: grid;
}
.imgCon img {
width: 95.5%;
height: 95%;
margin: auto;
border-radius: inherit;
grid-column-start: 1;
grid-row-start: 1;
}
.iconCon {
display: flex;
justify-content: center;
align-items: center;
width: 4rem;
height: 4rem;
margin: auto;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
grid-column-start: 1;
grid-row-start: 1;
}
<div class="imgCon">
<img src="https://www.vitalground.org/wp-content/uploads/2021/11/Bart-the-Bear-II--e1637176991443.jpg" />
<!--center this-->
<div class="iconCon">
C
</div>
</div>
You could use background-image property and tiny styling changes.
.imgCon {
display: flex;
justify-content: center;
align-items: center;
width: 20rem;
height: 20rem;
margin: auto;
background-color: blue;
background-image: url("https://www.vitalground.org/wp-content/uploads/2021/11/Bart-the-Bear-II--e1637176991443.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 80%;
}
.iconCon {
display: flex;
justify-content: center;
align-items: center;
width: 3rem;
height: 3rem;
margin: auto;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
}
.container {
display: flex;
justify-content: center;
align-item: center;
}
<div class="imgCon">
<div class="container">
<!--center this-->
<div class="iconCon">
C
</div>
</div>
</div>
this is my layout.
The desired behavior is that when I resize the window vertically the image scales maintaining the original aspect ratio.
My code works very well in all browser except Safari (you can see it by trying the snippet in different browsers).
Do you have a solution? Thanks ;)
.wrap-container{
width: 100%;
display: flex;
justify-content: center;
background-color: yellow;
height: 55vh;
}
.wrap{
width: 700px;
background-color: aqua;
display: flex;
justify-content: flex-start;
align-items: flex-end;
padding-top: 64px;
}
.wrap img{
height: 100%;
width: auto;
max-width: 300px;
max-height: 300px;
}
<div class="wrap-container">
<div class="wrap">
<img src="https://via.placeholder.com/300"/>
</div>
</div>
Add flex: 0; on the image
.wrap-container{
width: 100%;
display: flex;
justify-content: center;
background-color: yellow;
height: 55vh;
}
.wrap{
width: 700px;
background-color: aqua;
display: flex;
justify-content: flex-start;
align-items: flex-end;
padding-top: 64px;
}
.wrap img{
height: 100%;
width: auto;
flex: 0;
max-width: 300px;
max-height: 300px;
}
<div class="wrap-container">
<div class="wrap">
<img src="https://via.placeholder.com/300"/>
</div>
</div>
This question already has answers here:
White space under image [duplicate]
(5 answers)
Remove white space from image
(3 answers)
Closed 5 years ago.
So I have two divs in a full width container that I want to give variable sizing with flexbox, but no matter what I do, there is an annoying offset at the bottom. Using margins I can come close to fixing the problem, but it's never perfect.
If you run the code snippet below and scroll to the bottom you can see it, the image and the black content container are not aligned at the bottom.
What's going on?
#container {
width: 100%;
display: inline-flex;
flex-direction: row;
}
#image-wrapper {
flex-grow: 3;
max-width: 1000px;
position: relative;
/*background-color: black;*/
}
#menu {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px;
background-color: #101010;
color: #fefefe;
align-items: stretch;
display: flex;
margin-bottom:7px;
}
#form {
width: 100px;
}
#image {
width: 100%;
}
<div id="container">
<div id="image-wrapper">
<img id="image" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg"/>
</div>
<div id="menu">
<div id="form">
CONTENT<br>CONTENT<br>
</div>
</div>
</container>
There is some space below the image since the image is an inline-element and as such there is some space reserved below the (invisble) baseline that the image is aligned to vertically. To avoid that, there are two possible solutions:
1.) Apply display: block; to the image (see first snippet)
or
2.) Apply font-size: 0 to the image container (see second snippet)
#container {
width: 100%;
display: inline-flex;
flex-direction: row;
}
#image-wrapper {
flex-grow: 3;
max-width: 1000px;
position: relative;
/*background-color: black;*/
}
img {
display: block;
}
#menu {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px;
background-color: #101010;
color: #fefefe;
align-items: stretch;
display: flex;
}
#form {
width: 100px;
}
#image {
width: 100%;
}
<div id="container">
<div id="image-wrapper">
<img id="image" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" />
</div>
<div id="menu">
<div id="form">
CONTENT<br>CONTENT<br>
</div>
</div>
</div>
SECOND SOLUTION:
#container {
width: 100%;
display: inline-flex;
flex-direction: row;
}
#image-wrapper {
flex-grow: 3;
max-width: 1000px;
position: relative;
/*background-color: black;*/
font-size: 0;
}
#menu {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px;
background-color: #101010;
color: #fefefe;
align-items: stretch;
display: flex;
}
#form {
width: 100px;
}
#image {
width: 100%;
}
<div id="container">
<div id="image-wrapper">
<img id="image" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" />
</div>
<div id="menu">
<div id="form">
CONTENT<br>CONTENT<br>
</div>
</div>
</div>
#container {
width: 100%;
display: inline-flex;
flex-direction: row;
}
#image-wrapper {
flex-grow: 3;
max-width: 1000px;
position: relative;
/*background-color: black;*/
}
#menu {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px;
background-color: #101010;
color: #fefefe;
align-items: stretch;
display: flex;
margin-bottom:4px;
}
#form {
width: 100px;
}
#image {
width: 100%;
}
<div id="container">
<div id="image-wrapper">
<img id="image" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg"/>
</div>
<div id="menu">
<div id="form">
CONTENT<br>CONTENT<br>
</div>
</div>
</container>
Looks like the margin is just a bit off
I'm not quite understanding what rule of stacking context I am not understanding here. I have a 'divider' line ('divider-line') that I want to put behind a box div ('block').
Here is the HTML:
<div class="report-title">
<div class="divider-line"></div>
<div class="block">
<div class="icon">0</div>
<h1 class="text">FOO BAR</h1>
</div>
</div>
Here is the CSS(w/ scss nesting):
.report-title {
display: flex;
align-items: center;
flex-direction: column;
position: relative;
width: 100%;
margin: 100px 0;
.block {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: -100px;
z-index: 10;
height: 200px;
width: 475px;
.icon {
font-size: 9rem;
}
.text {
display: block;
}
}
.divider-line {
width: 100%;
height: 1px;
background-color: gray;
}
}
The HTML context, having 'divider-line' child come before it's sibling 'block' should put it behind no? The z-index of 10 on 'block' doesn't do anything, and I've tried putting a z-index of -1 on 'divider-line' as well (to no avail).
Any advice or direction would be great,
Without the z-index in you example, adding a background colour to the block shows that the divider is behind the block.
.report-title {
display: flex;
align-items: center;
flex-direction: column;
position: relative;
width: 100%;
margin: 100px 0;
}
.block {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
background-color: #FFF;
top: -100px;
height: 200px;
width: 475px;
}
.icon {
font-size: 9rem;
}
.text {
display: block;
}
.divider-line {
width: 100%;
height: 1px;
background-color: gray;
}
<div class="report-title">
<div class="divider-line"></div>
<div class="block">
<div class="icon">0</div>
<h1 class="text">FOO BAR</h1>
</div>
</div>