Bit of a beginner's question here - I'm sure it's been asked many times over but not knowing how to phrase the question means I've found it hard to find answers.
I'm trying to create 3 "cards" in a div which are responsive. I would like the margin between the cards to stay at 20px.
This is what I've come up with so far - the contents of the card container should add up to 965, so I'm not sure what's causing it to break and spill out, unless I'm doing something else wrong.
.container {
max-width: 1280px;
}
.card-container {
max-width: 965px;
padding: 0 20px;
display: block;
float: left;
}
.card {
width: 33%;
min-width: 295px;
}
.one {
width: 100%;
height: 200px;
background-color: #333;
display: block;
float: left;
}
.card + .card {
margin: 0px 0px 0px 20px;
}
<div class="container">
<div class="card-container">
<div class="card">
<div class="one"></div>
</div>
<div class="card">
<div class="one"></div>
</div>
<div class="card">
<div class="one"></div>
</div>
</div>
<!-- <div class="map-card"></div> -->
</div>
Thanks for any help, or redirecting to a similar topic.
You can use flex like this https://jsfiddle.net/3gg8ngm2/2/:
.container {
max-width: 1280px;
}
.card-container {
max-width: 965px;
padding: 0 20px;
display: flex;
}
.card {
width: 33%;
/* min-width: 295px; */
}
.one {
width: 100%;
height: 200px;
background-color: #333;
display: block;
float: left;
}
.card + .card {
margin: 0px 0px 0px 20px;
}
<div class="container">
<div class="card-container">
<div class="card">
<div class="one"></div>
</div>
<div class="card">
<div class="one"></div>
</div>
<div class="card">
<div class="one"></div>
</div>
</div>
<!-- <div class="map-card"></div> -->
</div>
Or you can also use display-inline-block to your .card class.
There is a solution based on display: flex
.container {
width: 600px;
}
.card-container {
display: flex;
background: yellow;
}
.card {
width: calc(33% - 20px);
margin-right: 20px;
}
.card:first-child {margin-left:20px}
.one {
height: 200px;
background-color: #333;
}
<div class="container">
<div class="card-container">
<div class="card">
<div class="one">1</div>
</div>
<div class="card">
<div class="one">2</div>
</div>
<div class="card">
<div class="one">3</div>
</div>
</div>
</div>
Add this
.card {
width: 30%;
float:left;
min-width: 295px;
}
and will resolve your issue.
Related
I want div.line with border black like below code to have full height in container scroll.
When there is an element that is too long, for example, line number 4 the borders will be shortened, with no height until the end.
Is there a way for the elements inside the scroll container to always be the same height as the tallest element?
Thanks, everyone!
.container {
display: flex;
align-items: stretch;
height: 300px;
overflow: auto;
}
.line {
width: calc(100% / 4);
border-left: 1px solid #000;
padding: 0 16px;
}
.item {
height: 100px;
background: blue;
color: white;
padding: 16px;
}
.line:nth-child(2) .item {
height: 200px;
}
.line:nth-child(4) .item {
height: 600px;
}
<div class="container">
<div class="line">
<div class="item">1</div>
</div>
<div class="line">
<div class="item">2</div>
</div>
<div class="line">
<div class="item">3</div>
</div>
<div class="line">
<div class="item">4</div>
</div>
</div>
If I get you right, then
<!DOCTYPE html>
<html lang="en">
<head>
<title>Scroll flex</title>
<style>
.another-container {
height: 300px;
overflow-y: scroll;
}
.container {
display: flex;
}
.line {
width: calc(100% / 4);
border-left: 1px solid #000;
padding: 0 16px;
}
.item {
height: 100px;
background: blue;
color: white;
padding: 16px;
}
.line:nth-child(2) .item {
height: 200px;
}
.line:nth-child(4) .item {
height: 600px;
}
</style>
</head>
<body>
<div class="another-container">
<div class="container">
<div class="line">
<div class="item">1</div>
</div>
<div class="line">
<div class="item">2</div>
</div>
<div class="line">
<div class="item">3</div>
</div>
<div class="line">
<div class="item">4</div>
</div>
</div>
</div>
</body>
</html>
Your solution does not work as intended because you set the height of your flex container explicitly, as #XiaoGuang pointed out. None of flex items could be greater than the container itself. So first step is to remove the height property and let the flex container to become as tall as the tallest flex item. After that, if you still need scrolling, just add another container for that.
You should use grid in this case instead of flex. Take a look at comments in code for more details.
.container {
display: grid; /* change to grid */
grid-template-columns: repeat(4, 1fr); /* create 4 columns */
height: 300px;
overflow: auto;
}
.line {
width: calc(100% - 16px * 2); /* full width column */
border-left: 1px solid #000;
padding: 0 16px;
}
.item {
height: 100px;
background: blue;
color: white;
padding: 16px;
}
.line:nth-child(2) .item {
height: 200px;
}
.line:nth-child(4) .item {
height: 600px;
}
<div class="container">
<div class="line">
<div class="item">1</div>
</div>
<div class="line">
<div class="item">2</div>
</div>
<div class="line">
<div class="item">3</div>
</div>
<div class="line">
<div class="item">4</div>
</div>
</div>
Since your .line divs also contain an item, you need to make them flexboxs as well, and then make the item grow to the full height. Something like this:
.container {
display: flex;
align-items: stretch;
height: 300px;
overflow: auto;
}
.line {
width: calc(100% / 4);
border-left: 1px solid #000;
padding: 0 16px;
display: flex;
flex-direction: column;
}
.item {
background: blue;
color: white;
padding: 16px;
flex-grow: 1;
}
.line:nth-child(2) .item {
height: 200px;
}
.line:nth-child(4) .item {
height: 600px;
}
<div class="container">
<div class="line">
<div class="item">1</div>
</div>
<div class="line">
<div class="item">2</div>
</div>
<div class="line">
<div class="item">3</div>
</div>
<div class="line">
<div class="item">4</div>
</div>
</div>
And that's basically it.
I am hoping to center my parent div height based on my child div height. My goal is to have 3 boxes with a shorter, but wider rectangle centered vertically behind it. Right now I have my parent div shorter and wider than the children, however I cannot seem to center it vertically.
Here is the ideal outcome:
Here is my current version (Please ignore minor differences with text and box colors). :
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
}
#parent {
background-color: #f0f9fb;
max-height: 80px;
}
#container {
margin-top: 50px;
margin-bottom: 50px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col ">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Don't use a negative margin unless absolutely necessary. In this case, it is not. Use flex on parent with align-items: center;
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
}
#parent {
background-color: #f0f9fb;
max-height: 80px;
display: flex;
align-items: center;
}
#container {
margin-top: 50px;
margin-bottom: 50px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col ">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Without a sketch of what you are trying to do, I believe this is what you are wanting... You can just set a negative margin in the col divs in order to take them outside of the parent...
#container {
margin-top: 50px;
margin-bottom: 50px;
}
#parent {
background-color: #f0f9fb;
}
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
margin-top: -20px;
margin-bottom: -20px;
}
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Forked your fiddle: https://jsfiddle.net/jstgermain/o6xhL92s/
*** RECOMMEND BELOW SOLUTION ***
#Betsy, I would recommend simplifying your HTML and using flexbox over the previous solution to your fiddle. You will want to make sure your behavior is consistent across browsers and devices. You can use media queries to change the size to eht col items for smaller devices.
#container {
margin-top: 50px;
margin-bottom: 50px;
}
#parent {
background-color: red;
/*#f0f9fb;*/
display: flex;
justify-content: space-evenly;
}
.col {
border: 1px solid #00acd4;
background-color: white;
padding: 1em;
width: 25%;
margin: -20px auto;
}
<div id="container">
<div id="parent">
<div class="col">
<h3>$500</h3>
</div>
<div class="col">
<h3>$3500</h3>
</div>
<div class="col">
<h3>50%</h3>
</div>
</div>
</div>
I am trying to do message application like in image but I don't know how can I separate two blocks in same area. I will be glad if you help.
Here is an example:
Here is my code:
.Grid {
width: 600px;
height: 500px;
display: grid;
background-color: black;
}
.Sender {
width: 300px;
height: 80px;
justify-self: start;
background-color: white;
}
.Receiver {
width: 300px;
height: 80px;
justify-self: end;
background-color: gray;
}
<div class="Grid">
<div class="Sender">1</div>
<div class="Receiver">2</div>
<div class="Sender">3</div>
<div class="Receiver">4</div>
<div class="Sender">5</div>
<div class="Receiver">6</div>
<div class="Sender">7</div>
<div class="Receiver">8</div>
<div class="Sender">9</div>
<div class="Receiver">10</div>
<div class="Sender">11</div>
<div class="Receiver">12</div>
</div>
Please check below code and let me know if it helps
Watch in "Full page" mode to see the effect.
.Grid {
width: 600px;
float: left;
background-color: black;
}
.Sender {
float: left;
width: 300px;
height: 80px;
justify-self: start;
background-color: white;
}
.Receiver {
float: right;
margin-left: 1px;
width: 300px;
height: 80px;
justify-self: end;
background-color: gray;
}
<div class="Grid">
<div class="Sender">1</div>
<div class="Receiver">2</div>
<div class="Sender">3</div>
<div class="Receiver">4</div>
<div class="Sender">5</div>
<div class="Receiver">6</div>
</div>
<div class="Grid">
<div class="Sender">7</div>
<div class="Receiver">8</div>
<div class="Sender">9</div>
<div class="Receiver">10</div>
<div class="Sender">11</div>
<div class="Receiver">12</div>
</div>
I have a flex container that wraps some cards. I have implemented a horizontal scroller with flex(using flex-nowrap). The flex wrapper container is subjected to have a 36px left spacing and a 0px right spacing initially. The catch here is after the last card is scrolled I need to have a 36px right spacing.
here is what I did so far
*{
box-sizing: border-box;
}
h2 {
margin: 0;
}
body {
background: cadetblue;
}
.container {
width: 500px;
margin: 0 auto;
background: #000;
padding: 20px 36px;
}
.scroll-wrapper {
overflow: hidden;
margin-right: -36px;
}
.scroll-inner {
display: flex;
flex-flow: row nowrap;
overflow: auto;
margin: 0px -16px;
}
.card {
height: 250px;
width: 75%;
flex: 1 0 75%;
padding: 0px 16px;
}
.inner-wrapper {
background: #fff;
height: 250px;
}
<div class="container">
<div class="scroll-wrapper">
<div class="scroll-inner">
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
</div>
</div>
</div>
I have given a negative right margin for the wrapper to make it look like it's flowing from the right.
Once the last element is scrolled/reached I want it to look something like this
enter image description here
One thing I noticed is my scroll-inner(flex-nowrap) is not wrapping up the entire children. I presumed if we have five children each having width 50px. The scroll-inner should show a scrollable width of 250px, Unfortunately, it's not how flex is behaving. Any help or suggestion is much appreciated.
Updating few images that show what I'm really looking for
During scrolling
After scrolling till the last card
Try
.scroll-wrapper {
overflow: hidden;
margin: auto;
}
.scroll-inner {
display: flex;
flex-flow: row nowrap;
overflow: auto;
margin: auto;
}
I have found a fix and hope this help someone.
*{
box-sizing: border-box;
}
h2 {
margin: 0;
}
body {
background: cadetblue;
}
.container {
width: 500px;
margin: 0 auto;
background: #000;
padding: 20px 36px;
}
.scroll-wrapper {
overflow: hidden;
margin-right: -36px;
}
.scroll-inner {
display: flex;
flex-flow: row nowrap;
overflow: auto;
margin: 0px;
}
.card {
height: 250px;
width: 75%;
flex: 1 0 75%;
padding-right: 40px;
margin-right: -8px;
}
.inner-wrapper {
background: #fff;
height: 250px;
}
<div class="container">
<div class="scroll-wrapper">
<div class="scroll-inner">
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
</div>
</div>
</div>
Please do answer if someone has a better solution!! Thanks
I have div(class name:xyz)to insert small 4 divs (class name:ax )in it.
I need to insert the first two divs vertically, the third one should come next to first one horizontally and the fourth one should come next to the third vertically.
But all the children are appearing vertically in side the parent.
.xyz {
max-height: 450px;
max-width: 500px;
}
.ax {
height: 200px;
width: 200px;
margin: 0 50px 25px 0;
background-color: #C0C0C0;
}
<div class="xyz">
<div class="ax"> </div>
<div class="ax"> </div>
<div class="ax"> </div>
<div class="ax"> </div>
</div>
You can use CSS3 Multiple column layout which in your case will be column-count: 2;, this property works in following browsers.
.xyz {
max-height: 450px;
max-width: 500px;
column-count: 2;
-webkit-column-count: 2;
}
.ax {
height: 200px;
width: 200px;
margin: 0 50px 25px 0;
background-color: #C0C0C0;
display:inline-block;
}
<div class="xyz">
<div class="ax">1</div>
<div class="ax">2</div>
<div class="ax">3</div>
<div class="ax">4</div>
</div>
.xyz {
max-height: 450px;
max-width: 500px;
}
.ax {
height: 200px;
width: 200px;
margin: 0 50px 25px 0;
background-color: #C0C0C0;
float: left;
}
<div class="xyz">
<div class="ax"> </div>
<div class="ax"> </div>
<div class="ax"> </div>
<div class="ax"> </div>
</div>
Like this?
.xyz {
max-height: 450px;
max-width: 500px;
}
.ax {
height: 200px;
width: 200px;
margin: 0 50px 25px 0;
background-color: #C0C0C0;
float:left;
}
<div class="xyz">
<div class="ax"> </div>
<div class="ax"> </div>
<div style="clear:both"></div>
<div class="ax"> </div>
<div class="ax"> </div>
</div>
I think you are looking for this one , try with snippet
.xyz {
max-height: 450px;
max-width: 500px;
margin-right: -25px; /* newly added */
margin-left: -25px; /* newly added */
}
.ax {
height: 200px;
width: 200px;
margin: 0 25px 25px 25px;
background-color: #C0C0C0;
float:left; /* newly added */
}
<div class="xyz">
<div class="ax">1 </div>
<div class="ax">2 </div>
<div class="ax">3 </div>
<div class="ax">4 </div>
</div>