I am currently learning HTML, CSS, how am I going to output this?
HTML Code
<body>
<div class="container">
<div id=“one"> 1</div>
<div id=“two"> 2</div>
<div id="three">3</div>
<div id=“four"> 4</div>
<div id=“five"> 5</div>
</div>
</body>
CSS Code
.container {
width: 240px;
height: 200px;
border: 1px solid gray;
}
.container > div {
width: 80px;
height: 50px;
border: 1px solid red;
}
I knew that I have to use flexbox to do that, but I have no idea how to change it, below is my modification of the CSS, but the result is wrong.
.container {
width: 240px;
height: 200px;
border: 1px solid gray;
display: inline-flex;
flex-direction: column-reverse;
flex-wrap: wrap;
align-content: flex-start;
}
.container > div {
width: 80px;
height: 50px;
border: 1px solid red;
}
You need flex-wrap: wrap-reverse; align-content: flex-start;
.container {
width: 240px;
height: 200px;
border: 1px solid gray;
display: flex;
flex-wrap: wrap-reverse;
align-content: flex-start;
}
.container>div {
width: 80px;
height: 50px;
border: 1px solid red;
box-sizing: border-box; /* don't forget this */
}
<div class="container">
<div id="one"> 1</div>
<div id="two"> 2</div>
<div id="three">3</div>
<div id="four"> 4</div>
<div id="five"> 5</div>
</div>
Related
I am trying to position 3 div in the center of another div but I'm having issues with the positioning. I tried using verticle-align, and negative margins but nothing seems to be working.
.float-container {
border: 3px solid red;
padding: 250px;
position: relative;
background-color: lightblue;
}
.float-child {
width: 150px;
height: 150px;
float: left;
padding: 10px;
border: 2px solid red;
margin: 30px;
vertical-align: middle;
}
<div class="float-container">
<div class="float-child">
<div>Float Column 1</div>
</div>
<div class="float-child">
<div>Float Column 2</div>
</div>
<div class="float-child">
<div>Float Column 3</div>
</div>
</div>
example for my comment
vertical alignment is not avalaible for floatting elements. Nowdays, for this kind of layout, grid or flex are efficient, flexible and easy to put in action. This is not a float job ;)
.float-container {
border: 3px solid red;
display:flex;
align-items:center;
justify-content:center;
gap:30px;
min-height:500px;
position: relative;
background-color: lightblue;
}
.float-child {
width: 150px;
height: 150px;
padding: 10px;
border: 2px solid red;
}
<div class="float-container">
<div class="float-child">
<div>Float Column 1</div>
</div>
<div class="float-child">
<div>Float Column 2</div>
</div>
<div class="float-child">
<div>Float Column 3</div>
</div>
</div>
children only need now to be sized . alignement gap in between them is set from the flex parent. A min-height is given (500px inspirated from your padding 250px)
Remove the float: left; and in its place add display: flex;, justify-content: center;, align-items: center;, flex-direction: row;. For requirements like these, flex and grid are usually much simpler to implement.
.float-container {
display: flex;
padding: 250px;
position: relative;
align-items: center;
border: 3px solid red;
justify-content: center;
background-color: lightblue;
}
.float-child {
width: 150px;
height: 150px;
padding: 10px;
border: 2px solid red;
margin: 0 10px;
vertical-align: middle;
}
<div class="float-container">
<div class="float-child">
<div>Float Column 1</div>
</div>
<div class="float-child">
<div>Float Column 2</div>
</div>
<div class="float-child">
<div>Float Column 3</div>
</div>
</div>
An easy and "modern" way is to use Flexbox if there are no limitations being set as part of a requirement to use float. As an example:
.container {
border: 3px solid red;
padding: 20px;
background-color: lightblue;
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
.child {
width: 150px;
height: 150px;
padding: 10px;
border: 2px solid red;
}
<div class="container">
<div class="child">
Float Column 1
</div>
<div class="child">
Float Column 2
</div>
<div class="child">
Float Column 3
</div>
</div>
I'm trying to display 2 columns every row but I can't seem to get it right at the moment.
What i'm trying to replicate is this:
but i'm not sure on how to handle this with using flexbox
.flex {
display: flex;
flex-direction: row;
flex-basis: 100%;
flex: 1;
}
.box {
padding: 20px;
border: 1px solid black;
width: 100px;
height: 100px;
margin: 10px;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
<div class="flex">
<div class="box green">positive 1</div>
<div class="box yellow">positive 2</div>
<div class="box blue">positive 3</div>
<div class="box red">negative 1</div>
</div>
https://jsfiddle.net/1a9qLx5w/
The best way to achieve this layout would be with Grid CSS:
.flex {
display: grid;
grid-auto-flow: column;
grid-gap: 20px;
grid-template-rows: 100px 100px;
grid-template-columns: 100px 100px;
padding: 10px;
}
.box {
padding: 20px;
border: 1px solid black;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
* {
box-sizing: border-box;
}
<div class="flex">
<div class="box green">positive 1</div>
<div class="box yellow">positive 2</div>
<div class="box blue">positive 3</div>
<div class="box red">negative 1</div>
</div>
But since you're asking for a flexbox solution, here you go:
.flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 240px;
align-content: flex-start;
}
.box {
flex: 0 0 100px;
width: 100px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
* {
box-sizing: border-box;
}
<div class="flex">
<div class="box green">positive 1</div>
<div class="box yellow">positive 2</div>
<div class="box blue">positive 3</div>
<div class="box red">negative 1</div>
</div>
Working demo :
.flex {
display: flex;
flex-direction: row;
flex-basis: 100%;
flex: 1;
}
.box {
padding: 20px;
border: 1px solid black;
width: 100px;
height: 100px;
margin: 10px;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.row {
display: flex;
flex-direction: row;
}
<div class="row">
<div class="box green">positive 1</div>
<div class="box yellow">positive 2</div>
</div>
<div class="row">
<div class="box blue">positive 3</div>
<div class="box red">negative 1</div>
</div>
I just copied your example:
.row{
display: flex;
flex-direction: row;
justify-content: center;
}
.green{
padding: 15px;
border: solid 1px green;
}
.red{
padding: 15px;
border: solid 1px red;
}
.col{
margin-right: 15px;
}
<div class="row">
<div class="col">
<p class="green">Positive 1</p>
<p class="green">Positive 2</p>
</div>
<div class="col">
<p class="red">No Thanks</p>
</div>
</div>
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>
I know that this question has already been asked several times but none of them seem to work for me or they're "too complicated" for my example.
I have three divs. Two of them are aligned vertically. The other one should be next to them and should have the same hight as the other two together.
It should look like this:
This is what I have so far:
.wrapper{
border: 1px solid red;
background-color: #fffdea;
width: 100%;
display: inline-block;
}
.icon{
border: 1px solid lightgreen;
width: 130px;
float: left;
height: 100%;
}
.info{
border: 1px solid aqua;
display: flex;
justify-content: space-between;
}
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>
Have a look at my fiddle
It's better to wrap your right side div(.info) with a parent div.
Try this one , it could help
.wrapper{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: row;
justify-content: center;
border: 1px solid red;
background-color: #fffdea;
width: 100%;
padding: 10px;
}
.icon {
border: 1px solid lightgreen;
width: 30%;
}
.right-set {
width: 75%;
}
.info {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: row;
border: 1px solid aqua;
}
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="right-set">
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>
</div>
try this
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="info-set">
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>
</div>
.wrapper {
border: 1px solid red;
background-color: #fffdea;
width: 100%;
display: flex;
}
.icon {
border: 1px solid lightgreen;
width: 130px;
margin: 5px;
}
.info-set {
width: 100%;
}
.info {
border: 1px solid aqua;
display: flex;
justify-content: space-between;
margin: 5px 5px 5px 0;
}
Something needs to have a height set, either the wrapper or the icon. I also set height 50% of the info divs and changed box-sizing to border box for the contained elements.
.wrapper{
border: 1px solid red;
background-color: #fffdea;
width: 100%;
display: inline-block;
height: 130px;
}
.icon{
border: 1px solid lightgreen;
width: 130px;
float: left;
height: 100%;
box-sizing: border-box;
}
.info{
border: 1px solid aqua;
display: flex;
justify-content: space-between;
height: 50%;
box-sizing: border-box;
}
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>
Can be achieved using Flexbox and wrapping the info divs in a container.
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="info-container">
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>
</div>
CSS :
.wrapper{
border: 1px solid red;
background-color: #fffdea;
width: 100%;
display: flex;
}
.icon{
border: 1px solid lightgreen;
width: 30%;
min-height: 100%;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.2);
}
.info-container{
display: flex;
width: 70%;
box-sizing: border-box;
flex-direction: column;
}
.info{
border: 1px solid aqua;
}
You could also attempt to use css Grid.
.wrapper {
display: grid;
/*1fr unit is one fraction of the remaining space available. So I have divided the space into two tracks. One longer than the other*/
grid-template-columns: 1fr 5fr;
}
.icon {
background: #a03;
/*Run the icon div in two rows height but take one track width as the rest*/
grid-row: span 2;
}
.info {
background: #bccd03;
}
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>
Traditionally, I would stick with html table, but in my app I have to add some interaction in this "table" (I will be implementing collapsible window between rows with event listener, etc).
So I decided to use flexbox and emulate like a html table.
However I am having trouble for each row to align correctly column wise.
.container {
display: flex;
flex-wrap: wrap;
border: black 1px solid;
width: 100%;
}
.row {
display: flex;
height: 40px;
width: 100%;
align-items: center;
}
.cell {
padding-right: 25px;
padding-left: 20px;
align-items: center;
font-size: 20px;
border-right: 1px solid salmon
}
<div class="container">
<div class="row">
<div class="cell">Descrption</div>
<div class="cell">Amount per Month</div>
<div class="cell">Amount per year</div>
</div>
<div class="row">
<div class="cell">Income</div>
<div class="cell">$20,000</div>
<div class="cell">$45,000</div>
</div>
</div>
As you can see, the right-border of each cells does not align correctly.
Is it possible using flex-box to achieve this? Or is my implementation is wrong?
Note: I cannot use any JavaScript nor jQuery for this one.
Since you are using display flex. you can use flex-basis property
See snippet below
.container {
display: flex;
flex-wrap: wrap;
border: black 1px solid;
width: 100%;
}
.row {
display: flex;
height: 40px;
width: 100%;
align-items: center;
}
.row .cell{
flex:0 0 30%;
}
.cell {
padding-right: 25px;
padding-left: 20px;
align-items: center;
font-size: 20px;
border-right: 1px solid salmon
}
<div class="color-div">
</div><div class="container">
<div class="row">
<div class="cell">Descrption</div>
<div class="cell">Amount per Month</div>
<div class="cell">Amount per year</div>
</div>
<div class="row">
<div class="cell">Income</div>
<div class="cell">$20,000</div>
<div class="cell">$45,000</div>
</div>
</div>
It is quite simple. Just give equal width to cell. e.g.:
.container {
display: flex;
flex-wrap: wrap;
border: black 1px solid;
width: 100%;
}
.row {
display: flex;
height: 40px;
width: 100%;
align-items: center;
}
.cell {
padding-right: 25px;
padding-left: 20px;
align-items: center;
font-size: 20px;
border-right: 1px solid salmon;
width: 33%;
}
<div class="container">
<div class="row">
<div class="cell">Descrption</div>
<div class="cell">Amount per Month</div>
<div class="cell">Amount per year</div>
</div>
<div class="row">
<div class="cell">Income</div>
<div class="cell">$20,000</div>
<div class="cell">$45,000</div>
</div>
</div>