I recently started to learn html and css. I have problem with positioning 2 div horizontally
My code:
HTML:
<div class = "cart__itemwraper">
<div class = "cart__item__image">
<img src="images/laptop.png" style = "width: 100%; height: 100%;"/>
</div>
<div class = "cart__item__desc">
<div class = "cart__item__name">
<span>name name</span>
</div>
<div class = "cart__item__price">
<span>price price</span>
</div>
</div>
<div class= "cart__item__counter">
<span> counter</span>
</div>
</div>
CSS:
.cart__itemwraper{
width: 100%;
display: flex;
}
.cart__item__image {
width: 20%;
background-color: red;
}
.cart__item__desc {
width: 40%;
display: flex;
background-color: #814ce4;
}
.cart__item__name {
background-color: greenyellow;
width: 100%;
}
.cart__item__price {
width: 100%;
background-color: #e44caa;
display: flex;
align-items: flex-end;
}
.cart__item__counter{
width: 40%;
background-color: yellow;
display: flex;
align-items: flex-end;
justify-content: flex-end;
}
I would like to move the price to the position marked with the arrow in my using flexbox screenshot. Can someone tell my how i can do it?
you can just add flex-direction: column; justify-content: space-between; to the cart__item__desc class.
.cart__itemwraper {
width: 100%;
display: flex;
}
.cart__item__image {
width: 20%;
background-color: red;
}
.cart__item__desc {
width: 40%;
display: flex;
background-color: #814ce4;
flex-direction: column;
justify-content: space-between;
}
.cart__item__name {
background-color: greenyellow;
width: 100%;
}
.cart__item__price {
width: 100%;
background-color: #e44caa;
display: flex;
align-items: flex-end;
}
.cart__item__counter {
width: 40%;
background-color: yellow;
display: flex;
align-items: flex-end;
justify-content: flex-end;
}
<div class = "cart__itemwraper">
<div class = "cart__item__image">
<img src="images/laptop.png" style = "width: 100%; height: 100%;"/>
</div>
<div class = "cart__item__desc">
<div class = "cart__item__name">
<span>name name</span>
</div>
<div class = "cart__item__price">
<span>price price</span>
</div>
</div>
<div class= "cart__item__counter">
<span> counter</span>
</div>
</div>
Hope this answers your question.
You can do this using order:1 and order:2 on the cart__item__name and cart__item__price classes, like this:
.cart__item__name {
background-color: greenyellow;
width: 100%;
order:2;
}
.cart__item__price {
width: 100%;
background-color: #e44caa;
display: flex;
align-items: flex-end;
order:1;
}
this will move the cart__item__price div to the first position, and the cart__item__name to the second.
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>
So I have 2 <div> tags in my body, and I want them both to be in one line. However, it automatically makes a line break. Is there a way to fix this?
.firstDiv {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 150px;
border-radius: 30%;
background-color: grey;
}
.secondDiv {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 150px;
border-radius: 30%;
background-color: grey;
margin-left: 10px;
}
.mainDiv {
display:flex;
flex-direction: row;
}
<div class="mainDiv">
<div class="firstDiv">
First Div
</div>
<div class="secondDiv">
Second Div
</div>
</div>
Use display inline block
.content {
width: 100px;
height: 100px;
display: inline-block;
background-color: black;
}
<div class="content">Content</div>
<div class="content">Content</div>
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>
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 need to place the orange button align at the bottom of the blue one.
With my current flex code I cannot get the result wanted. Any ideas how to fix it? Thanks
.content {
width: 350px;
height: 150px;
background-color: yellow;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.row1 {
background-color: red;
}
.row2 {
background-color: blue;
height: 100px
}
.icon {
width: 50px;
height: 50px;
background-color: orange;
align-items: center;
justify-content: center;
}
<div class="content">
<div class="row1">
</div>
<div class="row2">
<div class="icon">
</div>
</div>
</div>
You also need to set display: flex on row2 and then you can use align-self: flex-end on orange element.
.content {
width: 350px;
height: 150px;
background-color: yellow;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.row1 {
background-color: red;
}
.row2 {
background-color: blue;
display: flex;
height: 100px
}
.icon {
width: 50px;
height: 50px;
background-color: orange;
align-self: flex-end;
}
<div class="content">
<div class="row1"></div>
<div class="row2">
<div class="icon"></div>
</div>
</div>
Here we add this css in "row 2",
display: flex;
flex-direction: column;
its means if any object put at bottom then just parent block set above css and element we need to set as bottom add css "margin-top:auto;"
.content {
width: 350px;
height: 150px;
background-color: yellow;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.row1 {
background-color: red;
}
.row2 {
background-color: blue;
height: 100px;
display: flex;
flex-direction: column;
}
.icon {
width: 50px;
height: 50px;
background-color: orange;
align-items: center;
justify-content: center;
margin-top: auto;
}
<div class="content">
<div class="row1">
</div>
<div class="row2">
<div class="icon">
</div>
</div>
</div>
There is lot of stylings that can be removed from your code if it is not required, please find it here, I have changed .content and .row2 stylings
.content {
width: 350px;
height: 150px;
background-color: yellow;
display: flex;
}
.row1 {
background-color: red;
}
.row2 {
background-color: blue;
height: 100px;
flex: 1;
align-self: flex-end;
display: flex;
align-items: flex-end;
}
.icon {
width: 50px;
height: 50px;
background-color: orange;
align-items: center;
justify-content: center;
}
<div class="content">
<div class="row1">
</div>
<div class="row2">
<div class="icon">
</div>
</div>
</div>