I want to create something that looks more like this:
It must look the same for mobile devices:
one 100% block and 2 image with buttons under it.
The picture must occupy the entire width of the block.
The code below has a lot of empty space between blocks with a picture and at lower resolutions it does not work as desired.
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
background: #e2eaf4;
padding: 10px;
flex-direction: row;
}
.child {
display: inline-block;
font-family: "Open Sans", Arial;
font-size: 20px;
color: #FFF;
text-align: center;
background: #3794fe;
border-radius: 6px;
padding: 20px;
margin: 12px;
}
.child:first-child {
width: 100%;
}
.link {
background-color:white;}
<div class="container">
<div class="child">Child</div>
<div class="child"><img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg"width="200" height="200" >
<div class ="link">link </div>
</div>
<div class="child"><img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" width="200" height="200">
<div class ="link">link </div>
</div>
</div>
Here try something like this:
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
background: #e2eaf4;
padding: 10px;
flex-direction: row;
}
.child {
display: inline-block;
font-family: "Open Sans", Arial;
font-size: 20px;
color: #FFF;
text-align: center;
background: #3794fe;
border-radius: 6px;
padding: 20px;
}
.child:first-child {
width: 100%;
}
.child:nth-child(n+2){
width: 49%;
padding: 0px;
margin: 0px;
padding-top: 20px;
margin-top: 12px;
}
.link {
background-color:white;
padding: 20px;
margin: 12px;
}
img {
width: 100%;
height: auto;
}
<div class="container">
<div class="child">Child</div>
<div class="child"><img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" >
<div class ="link">link </div>
</div>
<div class="child"><img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" ">
<div class ="link">link </div>
</div>
</div>
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
background: #e2eaf4;
padding: 5px;
flex-direction: row;
}
.child {
display: inline-block;
font-family: "Open Sans", Arial;
font-size: 20px;
color: #FFF;
text-align: center;
background: #3794fe;
border-radius: 0px;
padding: 3px;
}
.child:first-child {
width: 100%;
}
.child:nth-child(n+2){
width: 49.9%;
padding: 0px;
margin: 0px;
padding-top: 3px;
margin-top: 3px;
}
.link {
background-color:white;
padding: 20px;
margin: 12px;
}
img {
width: 100%;
height: auto;
}
<div class="container">
<div class="child">Child</div>
<div class="child"><img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" >
<div class ="link">link </div>
</div>
<div class="child"><img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" ">
<div class ="link">link </div>
</div>
</div>
To make the image fill the child element, you need to set its width to 100% and height to auto.
Here is the altered snippet:
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
background: #e2eaf4;
padding: 10px;
flex-direction: row;
}
.child {
display: inline-block;
font-family: "Open Sans", Arial;
font-size: 20px;
color: #FFF;
text-align: center;
background: #3794fe;
border-radius: 6px;
padding: 20px;
}
.child:first-child {
width: 100%;
}
.child:nth-child(n+2){
width: 49%;
padding: 0px;
margin: 0px;
padding-top: 20px;
margin-top: 12px;
}
.link {
background-color:white;
padding: 20px;
margin: 12px;
}
.container .child img {
width: 100%;
height: auto;
}
<div class="container">
<div class="child">Child</div>
<div class="child"><img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg"width="200" height="200" >
<div class ="link">link </div>
</div>
<div class="child"><img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" width="200" height="200">
<div class ="link">link </div>
</div>
</div>
Related
This question already has answers here:
Fill remaining vertical space with CSS using display:flex
(6 answers)
Closed 9 months ago.
I'm trying to expand the content in the middle (main-box) to fit the whole page until it reaches the footer.
I've tried adding flex: 1 to it, making the height: 100% or even use flex-grow: 1 as it is a child of a flex item.
body {
display: flex;
flex: 1;
flex-direction: column;
border: solid black 10px;
}
.page {
display: flex;
flex-direction: column;
flex: 1;
}
header {
background-color: #2D3047;
color: #E0CA3C;
}
.container {
flex-grow: 1;
}
.buttons {
text-align: center;
}
.points {
display: flex;
justify-content: center;
gap: 10px;
}
.computer,
.player {
border: solid black 2px;
padding: 10px;
margin: 20px;
}
.result {
text-align: center;
border: solid black 2px;
margin: 0;
padding: 0;
width: auto;
}
footer {
background-color: #2D3047;
color: #E0CA3C;
justify-self: flex-end;
}
<div class="page">
<header>
<h1>Rock, Paper, Scissors</h1>
</header>
<div class="main-box">
<div class="buttons">
<button class="rock">Rock</button>
<button class="paper">Paper</button>
<button class="scissors">Scissors</button>
</div>
<div class="container">
<div class="points">
<div class="player-score">0</div>
<div class="computer-score">0</div>
</div>
<div class="result"></div>
</div>
</div>
<div class="footer">Copyright CAIFRA</div>
</div>
Codepen
I see you are using position absolute on footer class , in my opinion take a look i change it into a position relative. using position relative with bottom 0 , then it will work,
<div class="page">
<header>
<h1>Rock, Paper, Scissors</h1>
</header>
<div class="main-box">
<div class="buttons">
<button class="rock">Rock</button>
<button class="paper">Paper</button>
<button class="scissors">Scissors</button>
</div>
<div class="container">
<div class="points">
<div class="player-score">0</div>
<div class="computer-score">0</div>
</div>
<div class="result"></div>
</div>
</div>
<div class="footer">
Copyright CAIFRA
</div>
</div>
CSS CODE
body {
margin: 0;
padding: 0;
}
header {
text-align: center;
background-color: #2D3047;
color: #E0CA3C;
padding: 20px;
}
.page {
display: flex;
flex-direction: column;
flex: 1;
}
.main-box {
background-color: #93B7BE;
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
}
.computer-score, .player-score {
border: 2px black solid;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
}
.points {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.result {
border: 2px black solid;
height: 50px;
width: 300px;
margin-left: auto;
margin-bottom: 20px;
margin-right: auto;
display: flex;
align-items: center;
justify-content: center;
}
.buttons {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
padding-top: 30px;
}
.footer {
text-align: center;
background-color: #2D3047;
color: #E0CA3C;
padding: 10px;
position: relative;
bottom: 0;
left: 0;
width: 100%;
}
Maybe you can add 100vh on your container and see if this is what you want. Let me know
html {height: 99.1%;}
body {
flex-direction: column;
border: 10px solid black ;
height:99.1%;
margin: 0;
padding: 0;
}
.page {
display: flex;
flex-direction: column;
}
header {
background-color: #2D3047;
color: #E0CA3C;
}
.container {
height: 99.1% ;
bottom: 10px;
overflow: hidden;
}
.buttons {
text-align: center;
}
.points {
display: flex;
justify-content: center;
gap: 10px;
}
.computer,
.player {
border: solid black 2px;
padding: 10px;
margin: 20px;
}
.result {
text-align: center;
border: solid black 2px;
margin: 0;
padding: 0;
width: auto;
}
.footer {
background-color: #2D3047;
color: #E0CA3C;
bottom: 10px;
position: fixed;
width: 100%;
}
<body>
<div class="page">
<header>
<h1>Rock, Paper, Scissors</h1>
</header>
<div class="main-box">
<div class="buttons">
<button class="rock">Rock</button>
<button class="paper">Paper</button>
<button class="scissors">Scissors</button>
</div>
<div class="container">
<div class="points">
<div class="player-score">0</div>
<div class="computer-score">0</div>
</div>
<div class="result"></div>
</div>
</div>
<div class="footer">Copyright CAIFRA</div>
</div>
</body>
body {
margin: 0;
padding: 0;
}
header {
text-align: center;
background-color: #2D3047;
color: #E0CA3C;
padding: 20px;
}
.page {
display: flex;
flex-direction: column;
height: 90vh;
}
.main-box {
background-color: #93B7BE;
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
height: 100vh;
}
.computer-score,
.player-score {
border: 2px black solid;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
}
.points {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.result {
border: 2px black solid;
height: 50px;
width: 300px;
margin-left: auto;
margin-bottom: 20px;
margin-right: auto;
display: flex;
align-items: center;
justify-content: center;
}
.buttons {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
padding-top: 30px;
}
.footer {
text-align: center;
background-color: #2D3047;
color: #E0CA3C;
padding: 10px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
<div class="page">
<header>
<h1>Rock, Paper, Scissors</h1>
</header>
<div class="main-box">
<div class="buttons">
<button class="rock">Rock</button>
<button class="paper">Paper</button>
<button class="scissors">Scissors</button>
</div>
<div class="container">
<div class="points">
<div class="player-score">0</div>
<div class="computer-score">0</div>
</div>
<div class="result"></div>
</div>
<div class="footer">
Copyright CAIFRA
</div>
</div>
</div>
Simply add body { min-height: 100vh; }, so it actually ahs the size of at least the viewport size. By default it will only have the height of the content.
body {
margin: 0;
box-sizing: border-box;
min-height: 100vh;
}
/* original CSS */
body {
display: flex;
flex-direction: column;
border: solid black 10px;
}
.page {
display: flex;
flex-direction: column;
}
header {
background-color: #2D3047;
color: #E0CA3C;
}
.container {
flex-grow: 1;
}
.buttons {
text-align: center;
}
.points {
display: flex;
justify-content: center;
gap: 10px;
}
.computer,
.player {
border: solid black 2px;
padding: 10px;
margin: 20px;
}
.result {
text-align: center;
border: solid black 2px;
margin: 0;
padding: 0;
width: auto;
}
footer {
background-color: #2D3047;
color: #E0CA3C;
}
<div class="page">
<header>
<h1>Rock, Paper, Scissors</h1>
</header>
<div class="main-box">
<div class="buttons">
<button class="rock">Rock</button>
<button class="paper">Paper</button>
<button class="scissors">Scissors</button>
</div>
<div class="container">
<div class="points">
<div class="player-score">0</div>
<div class="computer-score">0</div>
</div>
<div class="result"></div>
</div>
</div>
<div class="footer">Copyright CAIFRA</div>
</div>
This is my code which works - used vehicle platform - HTML with flex, but isn't quite esthetically pleasing:
body {
font-family: Verdana, sans-serif;
font-size: 16px;
line-height: 18px;
}
header.infog {
background-color: #333;
color: #FFF;
margin-bottom: 25px;
padding: 30px;
}
footer.infog {
background-color: #333;
color: #FFF;
margin-top: 20px;
margin-bottom: 25px;
padding: 10px;
}
.mainwrapper {
border: 2px solid;
display: table;
margin-left: 50px;
width: 900px;
}
.itemwrapper {
display: table-row;
width: 90px;
margin-right: -40px;
}
.itemwrapper1 {
display: table-row;
margin-left: -356em;
width: 100px;
}
.itemwrapper1 img {}
.some-page-wrapper {
margin: 15px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
margin-left: 40px;
width: 600px;
color: #333;
margin: 0;
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
padding: 20px;
}
.column1 {
margin-left: 40px;
background-color: blue;
color: #FFF;
margin: 0;
display: flex;
flex-direction: row;
flex-basis: 100%;
flex: 1;
padding: 20px;
}
.priceg {
font-size: 29px;
color: red;
padding-left: 500px;
}
.img-nac img {
max-width: 330px;
}
.img-nac1 img {
max-width: 460px;
}
.ncat {
flex-direction: row;
margin-left: -450px;
text-align: right 50px;
}
.ncat1 {
flex-direction: row;
margin-left: -200px;
text-align: right 50px;
}
.at1 {
white-space: nowrap;
margin-top: -20px;
}
.priceh {
margin-left: 180px;
margin-top: -20px;
}
.mainwrapper {
margin-bottom: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Car , Van, Caravan Dealer | Quality Used Cars</title>
<link rel="stylesheet" type="text/css" href="styles/style.css">
</head>
<body>
<header class="infog">
header
</header>
<div class='some-page-wrapper'>
<div class='row'>
<div class='column1'>
2003 TOYOTA RAV4 2.0 GX
</div>
<div class='column1 priceg'>
£8995
</div>
</div>
<div class='row'>
<div class='column img-nac'>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/2013_Toyota_RAV4_XLE_AWD_front_left.jpg/1280px-2013_Toyota_RAV4_XLE_AWD_front_left.jpg">
</div>
<div class='column ncat'>
black
</div>
</div>
</div>
<div class='some-page-wrapper'>
<div class='row'>
<div class='column1'>
2003 TOYOTA RAV4 2.0 GX
</div>
<div class='column1 priceg'>
£8995
</div>
</div>
<div class='row'>
<div class='column img-nac1'>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/2013_Toyota_RAV4_XLE_AWD_front_left.jpg/1280px-2013_Toyota_RAV4_XLE_AWD_front_left.jpg">
</div>
<div class='column ncat'>
rowtt
</div>
</div>
</div>
<div class='some-page-wrapper'>
<div class='row'>
<div class='column img-nac'>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/2013_Toyota_RAV4_XLE_AWD_front_left.jpg/1280px-2013_Toyota_RAV4_XLE_AWD_front_left.jpg">
</div>
<div class='column at1'>
<h3>2004 TOYOTA RAV4 2.0</h4>
black
</div>
<div class='column priceh'>
<h3>£6000</h4>
</div>
</div>
</div>
<footer class="infog">
footer
</footer>
</body>
</html>
The problem is that I'm trying to make it so that if the image is large it's still alongside the text, like this from my page:
The blue line below is actually a bit of the next image... I didn't screencap well.
I've not figured out how to with the CSS and max-width size to do this, resulting in:
The car description in the second flexbox (column and ncat classes) doesn't show up.
But it works fine with the smaller image; I'm trying to make it big enough for people to see.
This isn't the final version, as I'm adding Roboto font etc. in the CSS, but it's almost working.
I'd much appreciate any advice on how to ensure I can get this to work in flexbox.
Just update your CSS with the following code
body {
font-family: Verdana, sans-serif;
font-size: 16px;
line-height: 18px;
}
header.infog {
background-color: #333;
color: #FFF;
margin-bottom: 25px;
padding: 30px;
}
footer.infog {
background-color: #333;
color: #FFF;
margin-top: 20px;
margin-bottom: 25px;
padding: 10px;
}
.mainwrapper {
border: 2px solid;
display: table;
margin-left: 50px;
width: 900px;
}
.itemwrapper {
display: table-row;
width: 90px;
margin-right: -40px;
}
.itemwrapper1 {
display: table-row;
margin-left: -356em;
width: 100px;
}
.some-page-wrapper {
margin: 15px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
margin-left: 40px;
color: #333;
margin: 0;
display: flex;
flex-direction: column;
padding: 20px;
}
.column1 {
margin-left: 40px;
background-color: blue;
color: #FFF;
margin: 0;
display: flex;
flex-direction: row;
flex-basis: 100%;
flex: 1;
padding: 20px;
}
.priceg {
font-size: 29px;
color: red;
padding-left: 500px;
}
.img-nac img {
max-width: 330px;
}
.img-nac1 img {
max-width: 460px;
}
.ncat {
flex-direction: row;
text-align: right 50px;
}
.ncat1 {
flex-direction: row;
text-align: right 50px;
}
.at1 {
white-space: nowrap;
margin-top: -20px;
}
.priceh {
margin-left: 180px;
margin-top: -20px;
}
.mainwrapper {
margin-bottom: 20px;
}
in spite of my research on the internet I did not succeed in doing what I wanted to do.
I want to put my text to the left of my text or my text to the right of my image but I can't do it.
Here is the code :
HTML :
<div class="surfooter">
<div class="flex-container">
<div class="flex-item">
<img src="img/Nike.png" alt="Nike" class="img-responsive"/>
<p>Nike.com</p>
</div>
<div class="flex-item">
<img src="img/Adidas.png" alt="Adidas" class="img-responsive" />
<p>Adidas.com</p>
</div>
</div>
</div>
CSS :
.surfooter{
padding-bottom: 50px;
padding-top: 50px;
background-color: #466964;
color: white;
font-size: 16px;
position: relative;
}
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
height: 200px;
position: relative;
}
.flex-item {
margin: auto;
width: auto;
height: auto;
}
.flex-item p{
color: white;
font-size: 1.41em;
font-weight: bold;
line-height: 1.3em;
width: 80%;
margin: 0 auto;
}
.flex-item img{
object-fit: cover;
border-radius: 100%;
width: 150px;
height: 150px;
}
Thank you for reading
Since you're trying to change your text's, you have to change your flex-item div, which is:
In your Css script, put this:
.flex-item{
display:flex;}
Set display:flex; on your flex-item div.
HTML:
<div class="flex-item">
<img src="img/Nike.png" alt="Nike" class="img-responsive"/>
<p>Nike.com</p>
</div>
CSS:
.flex-item{
display:flex;
}
Change your .flex-item class to this hope this solves your problem.
.flex-item {
display:flex;
flex-direction:row;
}
I tried like this. It works.
<div class="surfooter">
<div class="flex-container">
<div class="flex-item">
<img src="img/Nike.png" alt="Nike" class="img-responsive"/>
<p>Nike.com</p>
</div>
<div class="flex-item">
<img src="img/Adidas.png" alt="Adidas" class="img-responsive" />
<p>Adidas.com</p>
</div>
</div>
</div>
css
.surfooter{
padding-bottom: 50px;
padding-top: 50px;
background-color: #466964;
color: white;
font-size: 16px;
position: relative;
}
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
height: 200px;
position: relative;
}
.flex-item {
margin: auto;
width: auto;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}
.flex-item p{
color: white;
font-size: 1.41em;
font-weight: bold;
line-height: 1.3em;
width: 80%;
margin: 0 auto;
}
.flex-item img{
object-fit: cover;
border-radius: 100%;
}
I am try to write markup and css for table based design in flexbox module !
Here is the Design
Here is the Markup
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header-area {
margin: 50px auto;
max-width: 800px;
}
.flextable-header {
width: 100%;
background: #f7f7f7;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 45px;
}
.flextable-header span {
width: 20%;
text-align: center;
}
.flextable-header .amount {
flex: auto;
text-align: right;
padding-right: 30px;
}
.flextable-content {
height: 100px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.flextable-content div {
width: 20%;
text-align: center;
}
.text-left {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 15px;
height: 100%;
}
#dates {
text-align: left;
display: inline-block;
}
.flextable-content .money {
flex: auto;
text-align: right;
padding-right: 30px;
}
.flextable-content div img {
width: 120px;
height: 80px;
border-radius: 5px;
object-fit: cover;
object-position: center;
}
<div class="header-area">
<div class="flextable-header">
<span>Photos</span>
<span>Date</span>
<span class="amount">Amount</span>
</div>
<div class="flextable-content">
<div><img src="https://i.imgur.com/VzV3NwJ.jpg" alt=""></div>
<div class="text-left">
<div>Business</div><br/>
<div id="dates">25 December 2019</div>
</div>
<div class="money">3500 <small>Taka</small></div>
</div>
</div>
I'm stack at date alignment and bottom border as per design which I put on top !
You can simplify your code like below and use a simple gradient for the line:
* {
box-sizing: border-box;
}
.header-area {
margin: 50px auto;
max-width: 800px;
}
.flextable-header,
.flextable-content{
background: #f7f7f7;
display: flex;
align-items: center;
height: 45px;
}
.flextable-header > span:first-child {
min-width:130px;
text-align:center;
}
.flextable-header .amount,
.flextable-content .money{
margin-left:auto;
padding-right: 30px;
}
.flextable-content {
height: 100px;
background:linear-gradient(grey,grey) bottom right/calc(100% - 130px) 1px no-repeat;
padding-bottom:10px;
margin:10px 0;
}
.flextable-content:last-child {
background:none;
}
.flextable-content > img {
max-width:120px;
border-radius: 5px;
}
.text-left {
padding-left:10px;
font-size: 15px;
}
<div class="header-area">
<div class="flextable-header">
<span>Photos</span>
<span>Date</span>
<span class="amount">Amount</span>
</div>
<div class="flextable-content">
<img src="https://i.imgur.com/VzV3NwJ.jpg" alt="">
<div class="text-left">
<div>Business</div>
<div class="dates">25 December 2019</div>
</div>
<div class="money">3500 <small>Taka</small></div>
</div>
<div class="flextable-content">
<img src="https://i.imgur.com/VzV3NwJ.jpg" alt="">
<div class="text-left">
<div>Business</div>
<div class="dates">25 December 2019</div>
</div>
<div class="money">3500 <small>Taka</small></div>
</div>
<div class="flextable-content">
<img src="https://i.imgur.com/VzV3NwJ.jpg" alt="">
<div class="text-left">
<div>Business</div>
<div class="dates">25 December 2019</div>
</div>
<div class="money">3500 <small>Taka</small></div>
</div>
</div>
Add width: 100% to your dates (use it as class, not id, id should be unique)
Add a spacer div at the bottom.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header-area {
margin: 50px auto;
max-width: 800px;
}
.flextable-header {
width: 100%;
background: #f7f7f7;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 45px;
}
.flextable-header span {
width: 20%;
text-align: center;
}
.flextable-header .amount {
flex: auto;
text-align: right;
padding-right: 30px;
}
.flextable-content {
height: 100px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.flextable-content div {
width: 20%;
text-align: center;
}
.text-left {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 15px;
height: 100%;
}
div.dates {
text-align: left;
display: inline-block;
width: 100%;
}
.flextable-content .money {
flex: auto;
text-align: right;
padding-right: 30px;
}
.flextable-content div img {
width: 120px;
height: 80px;
border-radius: 5px;
object-fit: cover;
object-position: center;
}
.spacer{
height: 1px;
background-color: #e5e5e5;
width: 78%;
float: right;
margin-right: 2%;
}
<div class="header-area">
<div class="flextable-header">
<span>Photos</span>
<span>Date</span>
<span class="amount">Amount</span>
</div>
<div class="flextable-content">
<div><img src="https://i.imgur.com/VzV3NwJ.jpg" alt=""></div>
<div class="text-left">
<div>Business</div><br/>
<div class="dates">25 December 2019</div>
</div>
<div class="money">3500 <small>Taka</small></div>
</div>
<div class="spacer"></div>
</div>
And to give some rest for other users, you can also change your HTML structure and use a border as a separator
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header-area {
margin: 50px auto;
max-width: 800px;
}
.flextable-header {
width: 100%;
background: #f7f7f7;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 45px;
}
.flextable-header span {
width: 20%;
text-align: center;
}
.flextable-header .amount {
flex: auto;
text-align: right;
padding-right: 30px;
}
.flextable-content {
height: 100px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.img-container {
flex-basis: 20%;
flex-shrink: 0;
flex-grow: 0;
text-align: center;
}
.border-container{
flex-basis: 78%;
flex-shrink: 0;
flex-grow: 0;
display: flex;
align-items: center;
border-bottom: 1px solid #e5e5e5;
margin-right: 2%;
padding-bottom: 15px;
height: 100%;
}
.text-left {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 15px;
height: 100%;
}
div.dates {
text-align: left;
display: inline-block;
width: 100%;
}
.flextable-content .money {
flex: auto;
text-align: right;
padding-right: 30px;
}
.flextable-content div img {
width: 120px;
height: 80px;
border-radius: 5px;
object-fit: cover;
object-position: center;
}
<div class="header-area">
<div class="flextable-header">
<span>Photos</span>
<span>Date</span>
<span class="amount">Amount</span>
</div>
<div class="flextable-content">
<div class="img-container"><img src="https://i.imgur.com/VzV3NwJ.jpg" alt=""></div>
<div class="border-container">
<div class="text-left">
<div>Business</div><br/>
<div class="dates">25 December 2019</div>
</div>
<div class="money">3500 <small>Taka</small></div>
</div>
</div>
</div>
Print screen image:
My problem is that I have two div containers and inside many div windows. How do I make the margins between objects inside different containers zero? (See picture).
<style type="text/css" media="screen">
html, body { height:100%; background-color: #666666;}
body { margin:0; padding:0; overflow:hidden; }
#ContainerBlue {
padding-top:100px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 150px;
background-color:#00F;
}
#ContainerGreen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 250px;
background-color:#090;
}
.div1 {
width: 300px;
margin: 5px;
text-align: center;
background-color:#09F;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
.div2 {
width: 300px;
margin: 5px;
text-align: center;
background-color:#F09;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
}
</style>
<div id="ContainerBlue">
<div class="div1" id="yan1">
<p>div1</p>
</div>
<div class="div2" id="yan2">
<p>div2</p>
</div>
<p align="center" style="color:#FFF; font: bold 18px/30px Tahoma, serif;">Container Blue</p>
</div>
</div>
<div id="ContainerGreen">
<p align="center" style="color:#FFF; font: bold 18px/30px Tahoma, serif;">Container Green</p>
<div class="div1" id="dik1">
<p>div1</p>
</div>
<div class="div2" id="dik2">
<p>div2</p>
</div>
</div>
You have to study Flexbox, I suggest reading this guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Basicaly the blue container has to be flex-direction: row; justify-content: center; align-items: flex-end;
and the green flex-direction: column; justify-content: flex-start; align-items: center;
html,
body {
height: 100%;
background-color: #666666;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#ContainerBlue {
padding-top: 100px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-end;
height: 150px;
background-color: #00F;
}
#ContainerGreen {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
height: 250px;
background-color: #090;
}
.div1 {
width: 300px;
margin: 5px;
text-align: center;
background-color: #09F;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
.div2 {
width: 300px;
margin: 5px;
text-align: center;
background-color: #F09;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
<div id="ContainerBlue">
<div class="div1" id="yan1">
<p>div1</p>
</div>
<div class="div2" id="yan2">
<p>div2</p>
</div>
<p align="center" style="color:#FFF; font: bold 18px/30px Tahoma, serif;">Container Blue</p>
</div>
<div id="ContainerGreen">
<div class="div1" id="dik1">
<p>div1</p>
</div>
<div class="div2" id="dik2">
<p>div2</p>
</div>
<p align="center" style="color:#FFF; font: bold 18px/30px Tahoma, serif;">
Container Green</p>
</div>