What is an easy way to make these cards look like that? I want the Y axe to be lower for each card. I tried with padding and calc() but it doesn't work
You can use nth:child to select each of them
.cards {
display: flex;
}
.card {
background-color: red;
width: 100px;
height: 100px;
margin: 0 10px;
}
.card:nth-child(2) {
margin-top: 10px;
}
.card:nth-child(3) {
margin-top: 20px;
}
.card:nth-child(4) {
margin-top: 30px;
}
<div class="cards">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
</div>
I Think you need a dynamic approach for aligning these elements.
You can use calc function with inline variable.
With nth child approach you have to mention margin for each and every element and later on if you change your mind and want to update margin than you have to update each and every element once again.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.cards {
vertical-align: top;
}
.cards .card {
display: inline-block;
vertical-align:top;
height: 150px;
width: 150px;
border: 1px solid #eaeaea;
margin-top: calc(20px * var(--index) );
}
</style>
</head>
<body>
<div class="cards">
<div class="card" style="--index:1"></div>
<div class="card" style="--index:2"></div>
<div class="card" style="--index:3"></div>
</div>
</body>
</html>
Related
Why margin-right is not working with last container element which parent have display:flex property?
For example:
<!doctype html>
<body>
<div style = " display: flex; border: 1px solid black; width: 300px; height: 400px;overflow-x: auto;" >
<img style = " display: block; float:left; width: 400px; height: 100px;margin-right: 10px;" src="images.jpg">
<img style = " display: block; float:left; width: 400px; height: 100px; margin-right: 10px;" src="images.jpg">
</div>
Jsfiddle Jsfiddle
Something like this should work. Note the width property values, your mileage with it may vary.
* {
box-sizing: border-box;
}
#parent {
overflow: auto;
width: 400px;
}
#inner {
display: flex;
border: 1px solid;
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
width: max-content;
}
img {
display: block;
margin-right: 10px;
}
<div id="parent">
<div id="inner">
<img src="https://picsum.photos/200?random=1" />
<img src="https://picsum.photos/200?random=2" />
<img src="https://picsum.photos/200?random=3" />
</div>
</div>
I removed all inline CSS. And I am bringing all the images under one class.
And of course, I removed float CSS because of flex. I use a CSS property gap for space between images.
Try this code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test </title>
</head>
<style>
.container {
display: flex;
border: 1px solid black;
gap: 20px;
padding: 20px;
}
.container img {
border: 1px solid red;
width: 400px;
height: 100px;
}
</style>
<body>
<div class="container">
<img src="https://image.shutterstock.com/image-vector/low-quality-stamp-sticker-seal-260nw-575960896.jpg">
<img src="https://image.shutterstock.com/image-vector/low-quality-stamp-sticker-seal-260nw-575960896.jpg">
<img src="https://image.shutterstock.com/image-vector/low-quality-stamp-sticker-seal-260nw-575960896.jpg">
</div>
</body>
</html>
I have problem with flex-wrap. When I set it and set width of child to 100% (to take entire "line"), it dont shrink.
Look at my code:
https://codepen.io/dinoq-the-reactor/pen/OJRJoNm
HTML:
<div id="main-container">
<div id="sub-container">
<div class="flex-container">
<div id="i1" class="flex-item">Icon</div>
<div id="i2" class="flex-item">some text, flex it!</div>
<div id="i3" class="flex-item">Icon</div>
<div id="i4" class="flex-item">Text on new line</div>
</div>
<div>
</div>
CSS:
#main-container{
width: auto;
position: absolute;
z-index: 9900;
}
#sub-container{
width:100%;
}
.flex-container {
background-color:blue;
display: flex;
flex-wrap: wrap;
}
.flex-item {
border: solid 1px green;
border-collapse: collapse;
background: grey;
color: white;
font-size: 3em;
}
#i2{
flex: 1;
}
#i4{
flex: 0 0 100%;
}
What I want is to achieve something like this:
Instead I got this:
Note: I really need use "flex-wrap" and html structure which I have... It is part of bigger project, and I can edit only CSS...
Note2: My container is so expanded because width of it is width of all child elements, so it counts width of my 4. child (which is on new line). This is some source of problem, but how it solve?
Thanks!
Below is the solution for your problem.
#main-container {
width: auto;
position: absolute;
z-index: 9900;
}
#sub-container {
width: 100%;
}
.flex-container {
background-color: gray;
font-size: 0;
}
.flex-item {
border: solid 1px green;
border-collapse: collapse;
color: white;
font-size: 3em;
display: inline-block;
font-size: 3rem;
}
.flex-item:last-child {
display: block;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="main-container">
<div id="sub-container">
<div class="flex-container">
<div id="i1" class="flex-item">Icon</div>
<div id="i2" class="flex-item">some text, flex it!</div>
<div id="i3" class="flex-item">Icon</div>
<div id="i4" class="flex-item">People of this world are travellers</div>
</div>
<div>
</div>
</body>
</html>
I want to make my div elements be centered in the same line. I want it to be done without using a fixed margin because that doesn't work as soon as you resize it or change screen resolution.
I've tried using "margin: 0 auto" but that didn't seem to work. I've also trid a couple of different things but they were honestly all just me kicking in the dark.
The HTML:
<div class="container div3">
<div class="sredina">
<div class="box">
<img>
<h3></h3>
<p></p>
</div>
<div class="box">
<img>
<h3></h3>
<p></p>
</div>
<div class="box">
<img>
<h3></h3>
<p></p>
</div>
</div>
The CSS:
.box{
text-align: center;
width: 20%;
border: 2px solid blue;
margin: 1pt;
float: left;}
.div3{
text-align: center;}
.sredina{
display: inline-block;
margin: auto;
border: 2px solid red;}
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
How it looks now:
An image of how it looks now
How I want it to look:
An image of how it should look
Use display: flex and justify-content: center on the the .sredina div within your container:
https://codepen.io/HappyHands31/pen/qwvEez
Try to use flex for your .sredina
https://codepen.io/anon/pen/zXbxym
.sredina{
display: flex;
justify-content: center;
align-items: strentch;
margin: auto;
border: 2px solid red;
}
Try this,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.outer{
background: #87ceeb;
width: 100%;
margin-left: auto;
margin-right: auto;
position: relative;
text-align:center;
}
.inner{
display: inline-block;
min-height: 100px;
height: 100px;
background: chartreuse;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">hello</div>
<div class="inner">hello</div>
<div class="inner">hello</div>
</div>
</body>
</html>
it works well in all screen sizes. You must use
display: inline-block;
in the inner div class
then use
margin-left: auto;
margin-right: auto;
position: relative;
text-align:center;
in the outer div.
A similar answer is here
.container {
max-width: 1170px;
margin: 0 auto;
}
.row::after {
display: block;;
content: "";
clear: both;
}
.col {
float: left;
}
.col-6 {
width: 50%;
}
.content {
font-size: 3em;
text-align: center;
color: #fff;
background-color: green;
width: 100%;
height: 300px
}
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col col-6">
<div class="content">Half of container width</div>
</div>
<div class="col col-6">
<div class="content green">The remaining part of the viewport
horizontally
</div>
</div>
</div>
</div>
</body>
</html>
I would like to achieve this effect where the first col-6 spans the first 50% of the container's width , and the second col-6 spans from 50% of the containers width to the end of the viewport. I'd like to put an image there, if it matters ( if absolute positioning must be used ).
Hopefully this is descriptive enough
You can try something with viewport units:
updated codepen
.container {
max-width: 1170px;
margin: 0 auto;
}
.row::after {
display: block;
;
content: "";
clear: both;
}
.col {
float: left;
}
.col-6 {
width: 50%;
}
.content {
font-size: 3em;
text-align: center;
color: #fff;
background-color: green;
width: 100%;
height: 300px
}
.half-vw .content {
width: 50vw;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col col-6">
<div class="content">Half of container width</div>
</div>
<div class="col col-6 half-vw">
<div class="content">The remaining part of the viewport horizontally
</div>
</div>
</div>
</div>
</body>
</html>
This is trivial to do with Flexbox.
Use flex-basis : 50% on the first child,
then flex-grow : 1 on the second child (Meaning, "Take whatever space is left").
.row {
display: flex;
height: 200px;
}
.row .first {
background:green;
flex-basis: 50%;
}
.row .second {
background: lightblue;
flex-grow: 1;
}
<div class="row">
<div class="first">First half</div>
<div class="second">Remaining space</div>
</div>
I would like to write a CSS script that involves 4 div in addition to a fifth div as a container.
The Div 1 should be at the top as a title, Div 2 should be at the center of the right side of the container ,Div 4(Containing img src) should be at the center of the container , and Div 3 should be at the bottom of the image.
I had a script as a trial but it not like that I want( Iam beginner in CSS) .
<html xmlns="http://www.w3.org/1999/html">
<head>
<title> </title>
<meta charset="utf-8">
<style>
#siena img {
display: inline-block;
margin-left: 0px;
}
#Container
{
margin-bottom: 3pc;
text-align: center;
border-width:2px;
border-color: #46b8da ;
margin-right: 100px;
margin-left: 100px;
border-style: solid;
background-color :#c4e3f3;
padding :10%;
}
#link
{
display: inline-block;
}
#price
{
top:100px;
width:50%
margin:0 auto;
float:right;
}
</style>
</head>
<body>
<meta charset="utf-8">
<h1 style="text-align: center;"> Text </h1>
<div id="Container" > <p>
<div id="siena" >
Text
<img src='http://www.traidnt.net/vb/attachments/480574d1272729780-no_pic.gif'>
<div id="price" >
price
</div>
</div>
<div id="link" >
<a href='https://www.google.com/?gws_rd=ssl' > </a>
</div>
</div>
</body>
</html>
Your markup looks invalid.
You have unecessary spaces within tags and unclosed p tags.
You can achieve what you want via this markup:
<div id="container">
<div id="header">Div 1</div>
<div id="content">Div 4</div>
<div id="side-content">Div 2</div>
<div id="footer">Div 3</div>
</div>
And then use CSS to position the elements:
#container {
width: 100%;
}
div {
border: 1pt solid black;
padding: 5px;
text-align: center;
}
#content {
width: 70%;
float: left;
}
http://jsfiddle.net/7dqagh7s/
Also, I would recommend using a StyleSheet rather than putting the code directly inline with the markup.
I tried to copy the image in css
.container{
width: 90%;
border: 1px solid brown;
height: 500px;
}
.top, .bottom{
margin-top: 10px;
width: 90%;
height: 100px;
border: 3px solid red;
margin-bottom: 10px;
}
.left, .right{
display: inline-block;
width: 50%;
border: 3px solid maroon;
height: 200px;
}
.right{
display: inline-block;
width: 40%;
margin-left: 5%;
}
<div class="container">
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom">bottom</div>
</div>
Edit since you asked about the image overlapping another div.
The following will make it so the image will not extend past it's container so the image wont overlap any other div.
.left img{
width: 100%;
max-width: 100%;
max-height: 100%;
}
Is that what you meant?