I have created simple circles using border radius 50% but the color of border is fading means color is spread out. How to Solve this ?, I have tried to create border using ::after but that doesn't work.
Here is my code:
.category-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.category-item {
margin-bottom: 10px;
padding: 15px;
}
.image-box {
width: 140px;
height: 140px;
border-radius: 50%;
display: table;
position: relative;
margin: 0 auto 24px;
background: #FBF4F3;
border: 1px solid #AF3D78;
}
.category-title {
text-align: center;
}
<div class="category-row">
<div class="category-item">
<div class="image-box"></div>
<div class="category-title">Fragrance</div>
</div>
<div class="category-item">
<div class="image-box"></div>
<div class="category-title">Fragrance</div>
</div>
<div class="category-item">
<div class="image-box"></div>
<div class="category-title">Fragrance</div>
</div>
<div class="category-item">
<div class="image-box"></div>
<div class="category-title">Fragrance</div>
</div>
<div class="category-item">
<div class="image-box"></div>
<div class="category-title">Fragrance</div>
</div>
Here is my problem:
I want a smooth border color.
Please open your jsfiddle link on a mobile device and zoom it. It is not fading out. The appearance may be different depending on the resolution and screen size.
Otherwise, you can try increasing the border-width to 2px:
.category-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.category-item {
margin-bottom: 10px;
padding: 15px;
}
.image-box {
width: 140px;
height: 140px;
border-radius: 50%;
display: table;
position: relative;
margin: 0 auto 24px;
background: #FBF4F3;
border: 2px solid #AF3D78;
}
.category-title {
text-align: center;
}
<div class="category-row">
<div class="category-item">
<div class="image-box"></div>
<div class="category-title">Fragrance</div>
</div>
<div class="category-item">
<div class="image-box"></div>
<div class="category-title">Fragrance</div>
</div>
<div class="category-item">
<div class="image-box"></div>
<div class="category-title">Fragrance</div>
</div>
<div class="category-item">
<div class="image-box"></div>
<div class="category-title">Fragrance</div>
</div>
<div class="category-item">
<div class="image-box"></div>
<div class="category-title">Fragrance</div>
</div>
</div>
Related
I managed to make a mockup of a timeline with blocks. It has a look that is ok. You can run the snippet to take a look or see this image:
.list {
display: flex;
flex-direction: column;
}
.item {
display: flex;
}
.item:not(:last-child) {
margin-bottom: 10px;
}
.left {
display: flex;
flex-direction: column;
}
.right {
flex: 1;
margin-left: 10px;
}
.border {
width: 1px;
border-radius: 10px;
background: black;
height: 100%;
margin: 2px auto;
}
.bubble,
.big-bubble {
padding: 10px 20px;
border: 1px solid black;
border-radius: 5px;
}
.big-bubble {
padding: 30px 0;
border: 1px solid black;
border-radius: 5px;
}
<div class="list">
<div class="item">
<div class="left">
<div class="bubble"></div>
<div class="border"></div>
</div>
<div class="right">
<div class="big-bubble"></div>
</div>
</div>
<div class="item">
<div class="left">
<div class="bubble"></div>
<div class="border"></div>
</div>
<div class="right">
<div class="big-bubble"></div>
</div>
</div>
<div class="item">
<div class="left">
<div class="bubble"></div>
<div class="border"></div>
</div>
<div class="right">
<div class="big-bubble"></div>
</div>
</div>
</div>
But I'm not satisfied with the result. I would like to align my timeline like this. The idea would be that the info bubble on the right starts in the vertical middle of the bubble on the left.
I don't see how to do it with flex.
Why not just give .right a margin-top that is equal to half the height of .left (11px)?
.list {
display: flex;
flex-direction: column;
}
.item {
display: flex;
}
.item:not(:last-child) {
margin-bottom: 10px;
}
.left {
display: flex;
flex-direction: column;
}
.right {
flex: 1;
margin-left: 10px;
margin-top: 11px;
}
.border {
width: 1px;
border-radius: 10px;
background: black;
height: 100%;
margin: 2px auto;
}
.bubble,
.big-bubble {
padding: 10px 20px;
border: 1px solid black;
border-radius: 5px;
}
.big-bubble {
padding: 30px 0;
border: 1px solid black;
border-radius: 5px;
}
<div class="list">
<div class="item">
<div class="left">
<div class="bubble"></div>
<div class="border"></div>
</div>
<div class="right">
<div class="big-bubble"></div>
</div>
</div>
<div class="item">
<div class="left">
<div class="bubble"></div>
<div class="border"></div>
</div>
<div class="right">
<div class="big-bubble"></div>
</div>
</div>
<div class="item">
<div class="left">
<div class="bubble"></div>
<div class="border"></div>
</div>
<div class="right">
<div class="big-bubble"></div>
</div>
</div>
</div>
Alteratively, if you don't want the increased gap, you can just give .left a margin-top of -11px:
.list {
display: flex;
flex-direction: column;
}
.item {
display: flex;
}
.item:not(:last-child) {
margin-bottom: 10px;
}
.left {
display: flex;
flex-direction: column;
margin-top: -11px;
}
.right {
flex: 1;
margin-left: 10px;
}
.border {
width: 1px;
border-radius: 10px;
background: black;
height: 100%;
margin: 2px auto;
}
.bubble,
.big-bubble {
padding: 10px 20px;
border: 1px solid black;
border-radius: 5px;
}
.big-bubble {
padding: 30px 0;
border: 1px solid black;
border-radius: 5px;
}
<div class="list">
<div class="item">
<div class="left">
<div class="bubble"></div>
<div class="border"></div>
</div>
<div class="right">
<div class="big-bubble"></div>
</div>
</div>
<div class="item">
<div class="left">
<div class="bubble"></div>
<div class="border"></div>
</div>
<div class="right">
<div class="big-bubble"></div>
</div>
</div>
<div class="item">
<div class="left">
<div class="bubble"></div>
<div class="border"></div>
</div>
<div class="right">
<div class="big-bubble"></div>
</div>
</div>
</div>
I have a simple html document (see - https://5fa3b1d135e99.htmlsave.net). When I try to print (cmd/ctrl+P) this document, chrome evaluate the print size as 31,776 pages:
After some research, when removing the gap property from .block-row, it's fixed, but I have no idea what's the cause, plus - I do need the gap.
Any ideas?
In case the link gets expired, this is the output:
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;600;700');
#media print {
* {
-webkit-print-color-adjust: exact;
}
.block-row,
.block-signature {
break-inside: avoid;
}
}
html,
body {
margin: 0;
}
body {
font-size: 10px;
font-family: "Open Sans";
}
.page-header {
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid #eaeaea;
padding-bottom: 8px;
margin: 0 24px 24px;
width: 100%;
}
.page-header > div {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.page-header > div > .a-logo-container,
.page-header > div > .other-logo-container {
flex: 1;
}
.page-header > div > .a-logo-container {
display: flex;
align-items: center;
justify-content: center;
}
.page-header .a-logo {
display: block;
width: 79px;
height: 20px;
}
.page-header .other-logo-container {
display: flex;
align-items: center;
}
.page-header .other-logo {
background: none no-repeat center center / contain;
display: block;
width: 40px;
height: 20px;
}
.page-header .other-logo-container {
gap: 8px;
}
.page-header .other-logo-container h2 {
font-size: 10px;
}
.page-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
font-size: 8px;
font-weight: 400;
width: 100%;
margin: 0 24px;
color: #999;
}
.block-box {
padding: 16px 24px;
background-color: #f9f9f9;
border-radius: 8px;
margin: 16px 0;
}
.block-box .block-column {
gap: 10px;
}
.block-row {
display: flex;
gap: 32px;
}
.block-row > * {
flex: 1;
}
.block-row > * + * {
margin: 16px;
}
.block-column {
display: flex;
flex-direction: column;
}
.block-text,
.block-start-end-time {
display: flex;
flex-direction: column;
gap: 6px;
}
.block-inline-key-value {
display: flex;
gap: 16px;
}
.block-inline-key-value > strong {
font-weight: 600;
}
.block-inline-title {
display: block;
border-bottom: 2px solid;
line-height: 25px;
font-weight: 600;
}
.block-container .label {
white-space: nowrap;
}
.block-title {
background-color: #f9f9f9;
padding: 6px 12px;
border-radius: 8px;
font-weight: 600;
}
.block-item {
display: block;
align-items: center;
}
.block-radios {
display: flex;
flex-direction: column;
gap: 8px;
}
.block-radios .checkbox {
width: 12px;
height: 12px;
border-radius: 100%;
border: 1px solid #c4c4c4;
box-shadow: 0 0 0 1px #fff inset;
}
.block-radios .checkbox[data-checked="true"] {
background-color: #292929;
}
.block-radios > .block-container {
display: flex;
}
.block-radios > .block-container > * {
width: 100%;
}
.block-checkboxes {
display: flex;
flex-direction: column;
gap: 8px;
}
.block-checkboxes > .block-container {
display: grid;
flex-wrap: wrap;
gap: 10px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.block-checkboxes .checkbox {
width: 12px;
height: 12px;
border: 1px solid #c4c4c4;
border-radius: 2px;
}
.block-checkboxes .checkbox[data-checked="true"] {
border-color: #292929;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAHCAYAAADam2dgAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABISURBVHgBfYzBDQAQEASvBCUoQUk6oRSlqIgSlgvigrPJfCaTJVIGwHcMfYKAsSylY46gLsfSTMGkKxBPEXt3cIRFDURoX74BA3ZgYkt9TZoAAAAASUVORK5CYII=) no-repeat center center #292929;
}
.block-signature {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 12px;
min-height: 100px;
}
.block-signature .signature-title {
border-top: 2px solid;
width: 100%;
text-align: center;
padding: 8px;
box-sizing: border-box;
max-width: 50vw;
}
.block-signature .signature-container > img {
transform: translateY(50%);
height: 80px;
}
<!DOCTYPE html>
<html>
<body>
<section class="blocks">
<div class="block-row">
<div class="block-radios">
<div class="block-inline-title">Radio</div>
<div class="block-container">
</div>
</div>
</div>
<div class="block-row">
<div class="block-title">Main Header</div>
</div>
<div class="block-row">
<div class="block-radios">
<div class="block-inline-title">Drop Down</div>
<div class="block-container">
</div>
</div>
</div>
<div class="block-row">
<div class="block-text">
<div class="block-inline-title">Short Text</div>
<div class="block-container">
<div class="block-item">lorem ipsum</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-text">
<div class="block-inline-title">Number</div>
<div class="block-container">
<div class="block-item">100</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-row">
<div class="block-signature">
<div class="signature-container"><strong>Tracey Kutch</strong>
</div>
<div class="signature-title">Patient Name</div>
</div>
<div class="block-signature">
<div class="signature-container">None</div>
<div class="signature-title">Signature</div>
</div>
<div class="block-signature">
<div class="signature-container"><strong>2020-11-04T00:00:00Z</strong>
</div>
<div class="signature-title">Date</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-start-end-time">
<div class="block-inline-title">Time</div>
<div class="block-container">
<div class="block-item">Invalid Date</div>
</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-title">TODO Image #Newbie012</div>
</div>
<div class="block-row">
<div class="block-title">TODO Chart #Newbie012</div>
</div>
<div class="block-row">
<div class="block-row"></div>
</div>
<div class="block-row">
<div class="block-checkboxes">
<div class="block-inline-title">Multiple Select (check)</div>
<div class="block-container">
</div>
</div>
</div>
<div class="block-row">
<div class="block-radios">
<div class="block-inline-title">Yes/No</div>
<div class="block-container">
</div>
</div>
</div>
<div class="block-row">
<div class="block-title">Sub Header</div>
</div>
<div class="block-row">
<div class="block-text">
<div class="block-inline-title">Long Text</div>
<div class="block-container">
<div class="block-item">TypeScript supports JSX transpilation and code analysis. If you are unfamiliar with JSX here is an excerpt from the official website: JSX is an XML-like syntax extension to ECMAScript without any defined semantics. It's NOT intended
to be implemented by engines or browsers. It's NOT a proposal to incorporate JSX into the ECMAScript spec itself. It's intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript.
The motivation behind JSX is to allow users to write HTML like views in JavaScript so that you can: Have the view Type Checked by the same code that is going to check your JavaScript Have the view be aware of the context it is
going to operate under (i.e. strengthen the controller-view connection in traditional MVC). Reuse JavaScript patterns for HTML maintenance e.g. Array.prototype.map, ?:, switch etc instead of creating new (and probably poorly typed)
alternatives. This decreases the chances of errors and increases the maintainability of your user interfaces. The main consumer of JSX at this point is ReactJS from facebook. This is the usage of JSX that we will discuss here.</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-row">
<div class="block-signature">
<div class="signature-container"><strong>Eliya Local</strong>
</div>
<div class="signature-title">Employee Name</div>
</div>
<div class="block-signature">
<div class="signature-container">None</div>
<div class="signature-title">Signature</div>
</div>
<div class="block-signature">
<div class="signature-container"><strong>2020-11-04T00:00:00Z</strong>
</div>
<div class="signature-title">Date</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-row">
<div class="block-signature">
<div class="signature-container"><strong>Signature</strong>
</div>
<div class="signature-title">Patient Name</div>
</div>
<div class="block-signature">
<div class="signature-container">None</div>
<div class="signature-title">Signature</div>
</div>
<div class="block-signature">
<div class="signature-container"><strong>2020-11-04T00:00:00Z</strong>
</div>
<div class="signature-title">Date</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-text">
<div class="block-inline-title">Date</div>
<div class="block-container">
<div class="block-item">12/Sa/1996</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-start-end-time">
<div class="block-inline-title">Time</div>
<div class="block-container">
<div class="block-item">Invalid Date</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-text">
<div class="block-inline-title">Add Free Text</div>
<div class="block-container">
<div class="block-item"></div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-title">TODO Chart #Newbie012</div>
</div>
<div class="block-row">
<div class="block-text">
<div class="block-inline-title">Blood Pressure</div>
<div class="block-container">
<div class="block-item">100 / 90</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-row"></div>
</div>
<div class="block-row">
<div class="block-row"></div>
</div>
<div class="block-row">
<div class="block-row"></div>
</div>
</section>
</body>
</html>
As pointed out by #kaiido the culprit seems to be the empty .block-row with the gap property.
We encountered the same issue and posted a bug in Chrome see link.
Our solution was to remove the gap property when the container is empty.
In your case
.block-row { display: flex; gap: 32px; }
.block-row:empty { gap: unset; }
I didn't have any empty tags and was still getting this issue. So I just removed gap entirely when in print mode and that worked.
#media print {
* {
gap: 0 !important;
}
}
How to put banners side by side using HTML/CSS? Ideally with different sizes as shown below?
One simple way would be to display the banners inline-block, and assign them the required width.
.banner {
display: inline-block;
}
.banner-sm {
width: 32%;
}
.banner-lg {
width: 65%;
}
.banner {
height: 100px;
background: #DDD;
padding: 0; margin: 0;
}
<div class="row">
<div class="banner banner-lg"> </div>
<div class="banner banner-sm"> </div>
</div>
<div class="row">
<div class="banner banner-sm"> </div>
<div class="banner banner-sm"> </div>
<div class="banner banner-sm"> </div>
</div>
<div class="row">
<div class="banner banner-sm"> </div>
<div class="banner banner-lg"> </div>
</div>
Either use some grid system, or the bare CSS float property, pseudo example shown below:
.banner1 {
float: left;
width: 100px;
height: 20px;
margin: 4px;
border: 1px solid #777;
}
.banner2 {
float: left;
width: 200px;
height: 20px;
margin: 4px;
border: 1px solid #777;
}
.banner3 {
float: left;
width: 50px;
height: 20px;
margin: 4px;
border: 1px solid #777;
}
.clearfix {
clear: both;
}
<div class="banner1">banner</div>
<div class="banner1">banner</div>
<div class="clearfix"></div>
<div class="banner2">banner</div>
<div class="clearfix"></div>
<div class="banner3">banner</div>
<div class="banner3">banner</div>
<div class="banner3">banner</div>
<div class="banner3">banner</div>
<div class="clearfix"></div>
Good luck
You can use Twitter Bootstrap to get grid system and other useful layout functionality:
.row div {
height: 30px;
background: #aaa;
border: 1px solid #ddd;
}
* {
box-sizing: border-box;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='row'>
<div class='col-xs-8'></div>
<div class='col-xs-4'></div>
</div>
<div class='row'>
<div class='col-xs-4'></div>
<div class='col-xs-4'></div>
<div class='col-xs-4'></div>
</div>
<div class='row'>
<div class='col-xs-4'></div>
<div class='col-xs-8'></div>
</div>
<div class='row'>
<div class='col-xs-4'></div>
<div class='col-xs-8'></div>
<div class='col-xs-8'></div>
<div class='col-xs-4'></div>
</div>
If you are familiar with twitter-bootstrap then use its Grid system otherwise using inline-block will help you.
div {
border: 1px solid #ddd;
height: 200px;
margin: 5px;
display: inline-block;
box-sizing:border-box;
}
<section style="width:650px">
<div style="width:415px;"></div>
<div style="width:200px;"></div>
<div style="width:200px;"></div>
<div style="width:200px;"></div>
<div style="width:200px;"></div>
<div style="width:200px;"></div>
<div style="width:415px;"></div>
</section>
you can use CSS3 flex-box concept
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
flex-direction:column;
}
.flex-item {
background-color: cornflowerblue;
width: calc(100% - 20px);
height: 100px;
margin: 10px;
display:flex;
justify-content:space-between;
}
.sub{
height:100%;
background:white;
box-sizing:border-box;
}
.one{
width:75%;
border:1px solid green;
}
.two{
width:25%;
border:1px solid red;
}
.subb{
width:33%;
background:white;
height:100%;
}
<div class="flex-container">
<div class="flex-item">
<div class="sub one">sub 1 </div>
<div class="sub two">sub 2 </div>
</div>
<div class="flex-item">
<div class="subb s3">sub 3 </div>
<div class="subb s4">sub 4 </div>
<div class="subb s5">sub 5 </div>
</div>
</div>
You can use Bootstrap to do this.
Bootstarp is a Powerful css framework which enables web developer's
to do stuff like these(dividing screens etc).
Bootstrap is very easy to learn and implement.
You can start Learning Bootstrap here
I'm trying to do the next thing:
so I tried it by:
http://jsfiddle.net/7ewrM/22/
<div class="container">
<div class="row-fluid">
<div class="col-xs-4">
<div class='img-container'>
<img src='http://graph.facebook.com/112845672063384/picture?type=square' />
<div class='img-text'>Mark zuckerberg</div>
</div>
</div>
<div class="col-xs-8">
some text
</div>
</div>
</div>
Any help appreciated!
.container {
border: 1px solid red;
padding: 0;
}
.img-container{
padding: 0 10px;
}
.imggg {
display: inline-block;
width: 25%;
padding: 10px;
border-right: 1px solid red;
}
.text {
width: 70%;
display: inline-block;
}
.marc-zuckerberg{
border-top: 1px solid red;
width: 100%
display:inline-block;
}
<div class="container">
<div class='img-container'>
<div class="imggg">
<img src='http://graph.facebook.com/112845672063384/picture?type=square' />
</div>
<div class='text'>text</div>
</div>
<div class='marc-zuckerberg'>Mark zuckerberg</div>
</div>
Here you go: http://jsfiddle.net/7ewrM/24/
I have a HTML structure with given CSS.
Both caption and progress elements should be rendered in same line. caption elements should not have fixed width and progress elements should fill up the rest of the space next to caption based on their inline-set width, which means that every progress element will have a different total pixel-width but should fill up only the given percentage of available space.
HTML structure and CSS rules can be changed in any way.
Is it possible to solve this problem with CSS only?
.table {
padding: 15px;
width: 280px;
border: 1px solid black;
font-family: sans-serif;
font-size: 12px;
}
.caption {
float: left;
}
.progress {
height: 14px;
border: 1px solid white;
border-radius: 4px;
background-color: green;
overflow: hidden;
}
.value {
margin-left: 5px;
}
<div class="table">
<div class="row">
<div class="caption">Short text: </div>
<div class="progress" style="width:11.65%">
<span class="value">11.65</span>
</div>
</div>
<div class="row">
<div class="caption">A bit longer text: </div>
<div class="progress" style="width:100%">
<span class="value">100.00</span>
</div>
</div>
<div class="row">
<div class="caption">X: </div>
<div class="progress" style="width:45.50%">
<span class="value">45.50</span>
</div>
</div>
</div>
Have you considered using Flexbox?
Just add this rule:
.row {
display: flex;
}
If your are concerned about browser support, an alternative would be using display:table. You should change your markup and CSS, like this:
.table {
border: 1px solid black;
font-family: sans-serif;
font-size: 12px;
padding: 15px;
width: 280px;
}
.inner-table {
display: table;
}
.row {
display: table-row;
}
.caption {
display: table-cell;
white-space: nowrap;
width: 1%;
}
.progress {
background-color: green;
border: 1px solid white;
border-radius: 4px;
display: table-cell;
height: 14px;
}
.value {
margin-left: 5px;
display:block;
width:0;
overflow: visible;
}
<div class="table">
<div class="inner-table">
<div class="row">
<div class="caption">Short text: </div>
<div style="width:1.65%" class="progress">
<span class="value">1.65</span>
</div>
<div class="remainder"></div>
</div>
</div>
<div class="inner-table">
<div class="row">
<div class="caption">A bit longer text: </div>
<div style="width:100%" class="progress">
<span class="value">100.00</span>
</div>
<div class="remainder"></div>
</div>
</div>
<div class="inner-table">
<div class="row">
<div class="caption">X: </div>
<div class="progress" style="width:45.50%">
<span class="value">45.50</span>
</div>
<div class="remainder"></div>
</div>
</div>
</div>
Please try this - padding-right: 5px; display:inline; add these properties in progress class and also remove width in progress.
Well, just for the future reference, I was playing a bit with the flexbox thingie and came up with this:
.table {
padding: 15px;
width: 280px;
border: 1px solid black;
font-family: sans-serif;
font-size: 12px;
}
.row {
display: flex;
}
.caption {
margin: 1px 5px 1px 0;
}
.progress {
flex-grow: 1;
margin: auto;
}
.progress-content {
height: 14px;
border-radius: 4px;
background-color: green;
}
.value {
margin-left: 5px;
}
<div class="table">
<div class="row">
<div class="caption">Short text:</div>
<div class="progress">
<div class="progress-content" style="width:11.65%">
<span class="value">11.65</span>
</div>
</div>
</div>
<div class="row">
<div class="caption">A bit longer text:</div>
<div class="progress">
<div class="progress-content" style="width:100%">
<span class="value">100.00</span>
</div>
</div>
</div>
<div class="row">
<div class="caption">X:</div>
<div class="progress">
<div class="progress-content" style="width:45.50%">
<span class="value">45.50</span>
</div>
</div>
</div>
</div>
If I get a solution without flexbox, will accept it as an answer :)