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>
Related
Is it possible to layout the following markup to be like the linked screenshot? Of course it would be easy to rearrange the HTML, but how might I start to approach it with only CSS?
<div class="container">
<div class="foo"></div>
<div class="bar"></div>
<div class="foo"></div>
<div class="bar"></div>
<div class="foo"></div>
<div class="bar"></div>
</div>
This CSS doesn't quite get there, but it's close (sort of).
.container{
width: 60%;
margin: 0 auto;
background-color: #ddd;
display: flex;
flex-flow: column nowrap;
}
.foo, .bar {
border: 1px solid black;
}
.foo{
width: 100px;
height: 40px;
background-color: #555;
align-self: flex-start;
}
.bar{
width: 450px;
height: 100px;
background-color: gray;
align-self: flex-end;
order: 2;
}
https://jsfiddle.net/joeashworth/h90nc2qL/3/
I know you mentioned not wanting to change the HTML but this is how I would go about creating this layout.
.container{
width: 60%;
margin: 0 auto;
background-color: #ddd;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
}
.boxed {
display: flex;
justify-content: space-around;
}
.foo, .bar {
border: 1px solid black;
}
.foo{
width: 100px;
height: 40px;
background-color: #555;
align-self: flex-start;
}
.foo-2 {
margin-top: -60px;
}
.foo-3 {
margin-top: -120px;
}
.bar{
width: 450px;
height: 100px;
background-color: gray;
align-self: flex-end;
order: 2;
margin-bottom: 10px;
}
<div class="container">
<div class="boxed">
<div class="foo foo-1"></div>
<div class="bar"></div>
</div>
<div class="boxed">
<div class="foo foo-2"></div>
<div class="bar"></div>
</div>
<div class="boxed">
<div class="foo foo-3"></div>
<div class="bar"></div>
</div>
</div>
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.
I have two divs div-a and div-b wrapped by another div div-a-b-wrapper.
div-a-b-wrapper is repeatable, so all div-a-b-wrapper are wrapped with another parent div, div-c.
I want to vertically center all div-a-b-wrappers inside div-c. This is the layout I want to achieve:
This is my HTML,
<div class="div-c">
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">b</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">b</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">b</div>
</div>
</div>
And this is the CSS I have for it so far,
.div-c {
width: 100%;
height: 100px;
border: 1px solid #333;
}
.div-a-b-wrapper {
width: 100px;
display: inline-block;
margin-left: 10px;
margin-right: 10px;
height: 100%;
}
.div-a {
background-color: red;
width: 100%;
}
.div-b {
background-color: blue;
width: 100%;
}
But with this the .div-a-b-wrapper is aligned to the top of div-c.
How do I center .div-a-b-wrapper in div-c?
Here is a fiddle: https://jsfiddle.net/6kfzLtx3/1/
Updated based on a comment
You could do that using flexbox
.div-c {
height: 100px;
border: 1px solid #333;
display: flex; /* added property */
align-items: center; /* added property, will center its children vertical */
overflow: hidden /* added property, will cut of overflowed elements */
}
.div-a-b-wrapper {
min-width: 100px; /* changed property, keep them at min. 100px */
margin: 0 5px;
border: 1px dotted red;
/* height: 100%; */ /* removed this or else they always take 100% height */
}
.div-a {
background-color: red;
}
.div-b {
background-color: blue;
}
<div class="div-c">
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
</div>
Try this css:
.div-c {
position: relative;
width: 100%;
height: 100px;
border: 1px solid #333;
}
.div-a-b-wrapper {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 100px;
display: inline-block;
margin-left: 10px;
margin-right: 10px;
border: 1px dotted red;
}
.div-a {
background-color: red;
width: 100%;
}
.div-b {
background-color: blue;
width: 100%;
}
This might be a solution to look into. Highly recommend flexbox.
.div-c {
width: 100%; height: 100px; border: 1px solid #333; display: flex; flex-direction: row; justify-content: space-around;
}
.div-a-b-wrapper {
width: 100px;
display: inline-block;
margin-left: 10px;
margin-right: 10px;
height: 100%;
border: 1px dotted red;
}
.div-a {
background-color: red;
width: 100%;
}
.div-b {
background-color: blue;
width: 100%;
}
<div class="div-c">
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
</div>
Use Flex-box
Apply the following styles to div-c
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
Then apply
display: flex;
flex-direction: column;
to div-a-b-wrapper
.div-c {
border: 1px solid #333;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100px;
border: 1px solid #333;
padding: 20px;
box-sizing:border-box;
}
.div-a-b-wrapper {
margin-left: 10px;
margin-right: 10px;
height: 100%;
display: flex;
flex-direction: column;
width: 100px;
}
.div-a {
background-color: red;
}
.div-b {
background-color: blue;
}
<div class="div-c">
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">b</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">b</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">b</div>
</div>
</div>
.div-c {
width: 100%;
height: 100px;
border: 1px solid #333;
padding:20px;
display: flex;
align-items: center;
}
.div-a-b-wrapper {
width: 100px;
display: inline-block;
margin-left: 10px;
margin-right: 10px;
height: 100%;
border: 1px dotted red;
}
.div-a {
background-color: red;
width: 100%;
}
.div-b {
background-color: blue;
width: 100%;
}
Try this:
<div class="div-c">
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
</div>
try this may be this will help you.
.div-c {
width: 100%;
height: 100px;
border: 1px solid #333;
text-align: center;
vertical-align: middle;
display: table-cell;
vertical-align: middle;
}
.div-a-b-wrapper {
width: 100px;
display: inline-block;
margin-left: 10px;
margin-right: 10px;
border: 1px dotted red;
}
.div-a {
background-color: red;
width: 100%;
}
.div-b {
background-color: blue;
width: 100%;
}
<div class="div-c">
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
</div>
You can use 3 different panels inside a container.
You can use the following code:
#content{
float: fixed;
height: 100%;
margin-left: 20%;
margin-right: 20%;
display: block;
padding-bottom: 0;
margin-bottom: 0;
width: 60%;
}
#navbar{
float: left;
height: 100%;
text-align: justify;
width: 20%;
display:block;
margin-right: 80%;
}
#rightpanel{
float: right;
margin-left: 80%;
height: 100%;
width: 20%;
text-align: justify;
display: block;
}
#container{
position: absolute;
float:none;
overflow: hidden;
height: 100%;
width: auto;
left: 0%;
right: 0%;
top: 0;
bottom: 0;
margin: 0;
}
After including this in the project, you can use the following code syntax to vertically align the content div in the center:
<body>
<div class="container">
<div class = "navbar">
left column content goes here.....
</div>
<div class="content">
content goes here....
</div>
<div class="rightpanel">
right panel...
</div>
</div>
</body>
Try this: https://jsfiddle.net/k2e8dzmo/
<div class="div-c">
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
</div>
css
.div-c {
width: 100%;
height: 125px;
border: 1px solid #333;
display: flex;
flex-direction:row;
justify-content:center;
align-items:center;
}
.div-a-b-wrapper {
width: 100px;
text-align:center;
margin-left: 10px;
margin-right: 10px;
}
.div-a {
background-color: red;
width: 100%;
}
.div-b {
margin-top:5px;
background-color: blue;
width: 100%;
height:75px;
}
Maybe put a center inside div-c like:
<div-c>
<center>
<divs></div>
</center>
</div-c>
I'm doing front end development for a project between some friends.
He is building the backed in rails and has templates that will generate the products and put the content in but I'm running into a situation where I'm not sure how to make them align properly?
This is a web based platform.
Here is the situation with the products. I have three for example. I created a product container that will hold them. I have the first one showing perfectly, then when I copy pasted another two (just to see them) they don't generate.
<div class="main-bkg">
<div class="card-row">
<div class="product-cont">
<div class="product-holder">
<div class="product-img"> <img src="img/box.jpg"> </div>
<div class="product-name">prod1</div>
<div class="product-info">
<div class="product-price">$99</div>
<div class="sep">-</div>
<div class="product-desc">box</div>
</div>
<div class="product-qty">
<div class="qty-sub">-</div>
<div class="qty-amount">1</div>
<div class="qty-add">+</div>
</div>
</div>
</div>
<div class="product-cont">
<div class="product-holder">
<div class="product-img"> <img src="img/circle.jpg"> </div>
<div class="product-name">prod2</div>
<div class="product-info">
<div class="product-price">$99</div>
<div class="sep">-</div>
<div class="product-desc">circle</div>
</div>
<div class="product-qty">
<div class="qty-sub">-</div>
<div class="qty-amount">1</div>
<div class="qty-add">+</div>
</div>
</div>
</div>
<div class="product-cont">
<div class="product-holder">
<div class="product-img"> <img src="img/tri.jpg"> </div>
<div class="product-name">prod3</div>
<div class="product-info">
<div class="product-price">$99</div>
<div class="sep">-</div>
<div class="product-desc">triangle</div>
</div>
<div class="product-qty">
<div class="qty-sub">-</div>
<div class="qty-amount">1</div>
<div class="qty-add">+</div>
</div>
</div>
</div>
</div>
</div>
The css is build in SASS, and I'll post in that for easy reading. If you want the css export I can show it.
I assume they are overlapping. I'm not totally sure an easy work around this other then giving each product a special ID and then applying styling to it.
.main-bkg {
padding-top: 165px;
height: 100vh;
background-color: #ebf0f1;
.card-row {
padding-top: 15px;
padding-bottom: 15px;
.product-cont {
padding-left: 30px;
padding-right: 30px;
.product-holder {
background-color: white;
height: 350px;
width: 200px;
border-radius: 20x;
.product-img {
img {
display: block;
height: 240px;
width: 170px;
margin-left: auto;
margin-right: auto;
padding-top: 15px;
}
}
.product-name {
text-align: center;
}
.product-info {
display: block;
height: 30px;
width: 100px;
text-align: center;
margin-left: auto;
margin-right: auto;
font-weight: 700;
.product-price {
display: inline-block;
text-align: center;
float: left;
}
.sep {
display: inline-block;
text-align: center;
}
.product-desc {
display: inline-block;
text-align: center;
float: right;
}
}
.product-qty {
display: block;
border-radius: 3px;
border: 1px solid $prime-color;
margin-left: auto;
margin-right: auto;
width: 100px;
.qty-sub {
color: $prime-color;
display: inline-block;
float: left;
width: 30px;
height: 25px;
text-align: center;
}
.qty-amount {
display: inline-block;
color: $prime-color;
font-size: 20px;
text-align: center;
width: 40px;
height: 25px;
}
.qty-add {
color: $prime-color;
display: inline-block;
text-align: center;
float: right;
width: 30px;
height: 25px;
}
}
}
}
}
}
Have you tried to put a float:left in the container to let the container float?
.product-cont {
padding-left: 30px;
padding-right: 30px;
float: left;
}
Check if this Codepen with SASS ready solves your problem
I am trying to vertically align a div in my code but with no success. This div contains sub divs. The first one
I want this to look like this :
but at the moment it is not aligned. This is my HTML code :
body {
display: block;
margin-left: auto;
margin-right: auto;
background: #f1f1f1;
}
.content {
float: left;
margin: 20px auto;
text-align: center;
width: 300px;
}
.content h1 {
text-transform: uppercase;
font-weight: 700;
margin: 0 0 40px 0;
font-size: 25px;
line-height: 30px;
}
.circle {
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
/* the magic */
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
text-align: center;
color: white;
font-size: 16px;
text-transform: uppercase;
font-weight: 700;
margin: 0 auto 20px;
}
.blue {
background-color: #052D72;
}
.green {
background-color: #16a085;
}
.red {
background-color: #e74c3c;
}
<div class="content">
<div class="circle blue"></div>
</div>
<div class="content">
<div class="circle blue">Blue</div>
<div class="circle blue"></div>
<div class="circle blue"></div>
<div class="circle blue"></div>
</div>
<div class="content">
<div class="circle blue"></div>
<div class="circle blue"></div>
</div>
So, in the .content I tried adding this :
vertical-align:baseline;
but I saw no difference.
Add display:inline-block & Remove float for #content
.content {
display: inline-block;
margin: 20px auto;
text-align: center;
vertical-align: middle;
width: 200px;
}
https://jsfiddle.net/k0fx384a/1/
EDIT with class: https://jsfiddle.net/k0fx384a/2/
You have used same #id with multiple elements. That is not allowed in HTML across all browsers(seems like IE and FF allow multiple #ids).
So just change all the occurances of id="content" to class="content" and the CSS should start working.
DEMO
change <div id="content"> to <div class="content"> so the styles will be applied.
If you want them both vertically and horizontally aligned, I would recommend using flex. This offers more flexibility and is more forward-facing.
Mozilla Docs on Flex
If you use the rules align-items and justify-content, you'll get magic workings. Check out an example: https://jsfiddle.net/vrad7yuj/
.container {
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
border: 2px solid #f00;
}
.col {
border: 2px solid #00f;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.ball {
border-radius: 50%;
border: 1px solid #0f0;
height: 60px;
width: 60px;
}
<div class="container">
<div class="col">
<div class="ball"></div>
</div>
<div class="col">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
<div class="col">
<div class="ball"></div>
<div class="ball"></div>
</div>
</div>
Alternative, if you want to do this with a little count of codelines, you can use flexbox:
body {
display: flex;
margin-left: auto;
margin-right: auto;
background: #f1f1f1;
}
.content {
display: flex;
flex-direction: column;
margin: 20px auto;
text-align: center;
width: 300px;
}
.content h1 {
text-transform: uppercase;
font-weight: 700;
margin: 0 0 40px 0;
font-size: 25px;
line-height: 30px;
}
.circle {
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
/* the magic */
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
text-align: center;
color: white;
font-size: 16px;
text-transform: uppercase;
font-weight: 700;
margin: 0 auto 20px;
}
.blue {
background-color: #052D72;
}
.green {
background-color: #16a085;
}
.red {
background-color: #e74c3c;
}
<div class="content">
<div class="circle blue"></div>
</div>
<div class="content">
<div class="circle blue">Blue</div>
<div class="circle blue"></div>
<div class="circle blue"></div>
<div class="circle blue"></div>
</div>
<div class="content">
<div class="circle blue"></div>
<div class="circle blue"></div>
</div>
Take a look on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Should just be an alternative solution and new knowledge for you. ;-) Cheers.