I am trying to lay down all these square divs horizontally but when I set display:inline-block on the parent div, everything shrinks down and collapses into a pellet. If I use flex, I feel like I need to tweak flex property to my need. Is there a simple way to fix it?(I want them to always occupy two lines evenly with the gap in between in response to the changing viewport width)
.square {
position: relative;
margin: 0;
max-width: 60px;
border: 1px dotted black;
border-radius: 4px;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
.square .content {
position: absolute;
width: 100%;
height: 100%;
}
<div class="number-of-round">
<div class="square">
<div class="content flex flex-center">1</div>
</div>
<div class="square">
<div class="content flex flex-center">2</div>
</div>
<div class="square">
<div class="content flex flex-center">3</div>
</div>
<div class="square">
<div class="content flex flex-center">4</div>
</div>
<div class="square">
<div class="content flex flex-center">5</div>
</div>
<div class="square">
<div class="content flex flex-center">6</div>
</div>
<div class="square">
<div class="content flex flex-center">7</div>
</div>
<div class="square">
<div class="content flex flex-center">8</div>
</div>
<div class="square">
<div class="content flex flex-center">9</div>
</div>
<div class="square">
<div class="content flex flex-center">10</div>
</div>
<div class="square">
<div class="content flex flex-center">11</div>
</div>
<div class="square">
<div class="content flex flex-center">12</div>
</div>
</div>
You need to set a width not max-width when using inline-block. Unlike block elements, inline-block doesn't take the full parent width so max-width will have no effect
.square {
display: inline-block;
position: relative;
margin: 0;
width: 60px;
border: 1px dotted black;
border-radius: 4px;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
.square .content {
position: absolute;
width: 100%;
height: 100%;
}
<div class="number-of-round">
<div class="square">
<div class="content flex flex-center">1</div>
</div>
<div class="square">
<div class="content flex flex-center">2</div>
</div>
<div class="square">
<div class="content flex flex-center">3</div>
</div>
<div class="square">
<div class="content flex flex-center">4</div>
</div>
<div class="square">
<div class="content flex flex-center">5</div>
</div>
<div class="square">
<div class="content flex flex-center">6</div>
</div>
<div class="square">
<div class="content flex flex-center">7</div>
</div>
<div class="square">
<div class="content flex flex-center">8</div>
</div>
<div class="square">
<div class="content flex flex-center">9</div>
</div>
<div class="square">
<div class="content flex flex-center">10</div>
</div>
<div class="square">
<div class="content flex flex-center">11</div>
</div>
<div class="square">
<div class="content flex flex-center">12</div>
</div>
</div>
.square {
width:10vw;
max-width:60px;aspect-ratio:1;
margin-bottom:3vw;
border: 1px dotted black;
border-radius: 4px;
}
.number-of-round{
display:flex;
justify-content: space-between;}
<div class="number-of-round">
<div class="square">
<div class="content flex flex-center">1</div>
</div>
<div class="square">
<div class="content flex flex-center">2</div>
</div>
<div class="square">
<div class="content flex flex-center">3</div>
</div>
<div class="square">
<div class="content flex flex-center">4</div>
</div>
<div class="square">
<div class="content flex flex-center">5</div>
</div>
<div class="square">
<div class="content flex flex-center">6</div>
</div>
</div>
<div class="number-of-round">
<div class="square">
<div class="content flex flex-center">7</div>
</div>
<div class="square">
<div class="content flex flex-center">8</div>
</div>
<div class="square">
<div class="content flex flex-center">9</div>
</div>
<div class="square">
<div class="content flex flex-center">10</div>
</div>
<div class="square">
<div class="content flex flex-center">11</div>
</div>
<div class="square">
<div class="content flex flex-center">12</div>
</div>
</div>
Related
Have something seemlier like this. items has a tooltip it show on hover. but see the bellow example it hide the badge when I put the items in scroll div. basically I want to make a scroll items section and when user hover over it the badge /tooltip display absolute position.
it also has a dropdown menu bottom of the item when hover over it. it work without scroll div, but when I put it into scroll carousal div it not display.
.list {
display: flex;
border:1px solid red;
}
.item {
width: 100px;
height: 100px;
background: red;
margin: 0px 4px;
position: relative;
flex: 0 0 100px;
}
.badge {
position: absolute;
top: -10px;
left: 8px;
width: 40px;
height: 20px;
background: blue;
z-index: 99;
}
.scroll-x {
width: 500px;
overflow-x: auto;
margin: 40px;
}
<div class="list">
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
</div>
<div class="scroll-x">
<div class="list">
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
</div>
</div>
Best I could come up with was this:
I added static height to .list and positioned .item to the bottom
Maybe not the best answer but I hope it helps :)
.list {
display: flex;
height: 110px; //-----
}
.item {
width: 100px;
height: 100px;
background: red;
margin: 0px 4px;
position: relative;
flex: 0 0 100px;
align-self: flex-end; //-----
}
.badge {
position: absolute;
top: -10px;
left: 8px;
width: 40px;
height: 20px;
background: blue;
z-index: 99;
}
.scroll-x {
width: 500px;
overflow-x: auto;
margin: 40px;
}
<div class="list">
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
</div>
<div class="scroll-x">
<div class="list">
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
<div class="item">
<div class="badge"></div>
</div>
</div>
</div>
I am trying to make a grid of responsive squares, which would look similar to a squared paper. I used a pre-prepared solution, which I tried to adopt to my purpose. My HTML code looks like this (example grid of 4*4 squares):
.square {
float: left;
position: relative;
width: 25%;
padding-bottom: 25%;
margin: 0%;
overflow: hidden;
}
.content {
position: absolute;
height: 100%;
width: 100%;
padding: 0%;
}
.table {
display: table;
height: 100%;
width: 100%;
padding: 0%;
margin: 0%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
height: 100%;
width: 100%;
padding: 0%;
margin: 0%;
border: thin solid black;
}
<div id="grid">
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
</div>
The grid is OK in Firefox. But when I look at it in Chrome, it displays two lines between second and third row (and between second and third column) instead of one. I tried to set .square background-color to black. It worked partially, but the line in question looks thicker than the others. Is there a batter solution?
There is no proper solution for this. Seems like Chrome rounds off widths on display: table but not on display: block. Slight change of markup produces consistent result:
.square {
float: left;
position: relative;
width: 25%;
padding-bottom: 25%;
margin: 0%;
overflow: hidden;
}
.content {
position: absolute;
height: 100%;
width: 100%;
padding: 0%;
}
.table {
/* removed display table */
height: 100%;
width: 100%;
padding: 0%;
margin: 0%;
}
.table-cell {
/* removed display table-cell */
vertical-align: middle;
height: 100%;
width: 100%;
padding: 0%;
margin: 0%;
border: thin solid black;
/* added */
box-sizing: border-box;
}
<div id="grid">
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
</div>
I guess your problem ist, that you have display:table and thus have double-borders inside yuor table. You can fix that with border-collapse:collapse inside your .table class.
Here's a working fiddle, no more thik lines, noe double borders in chrome: https://jsfiddle.net/Hoargarth/kh7fyegk/
Edit: I forgot to mention, that i also changed border: thin solid black; to border: 1px solid black; inside the fiddle, to remove the thick lines in chrome.
add border-collapse: collapse; in table class
.square {
float:left;
position: relative;
width: 25%;
padding-bottom : 25%;
margin:0%;
overflow:hidden;
}
.content {
position:absolute;
height:100%;
width:100%;
padding: 0%;
}
.table{
display:table;
height:100%;
width:100%;
padding: 0%;
margin: 0%;
border-collapse: collapse;
}
.table-cell{
display:table-cell;
vertical-align:middle;
height:100%;
width:100%;
padding: 0%;
margin: 0%;
border: thin solid black;
}
<div id="grid">
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
</div>
If you remove the position: relative from the .square and add the height to .content does it solve your problem ?
HTML
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="content">1x1</div>
</div>
<div class="col-md-4">
<div class="content">1x2</div>
</div>
<div class="col-md-4">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">2x1</div>
</div>
<div class="col-md-4">
<div class="content">2x2</div>
</div>
<div class="col-md-4">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">3x1</div>
</div>
<div class="col-md-4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
CSS
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.row{
padding: 5px;
}
I have managed to make vertical spaces between the columns by adding padding to the rows. But now the horizontal spaces between the contents are ways too much. How can I configure the spacing between them?
That large horizontal space is because of the fixed width of the content class if you remove that, you'll see it grow.
You can set the width of the content in % or add a margin to the content class.
.container {
text-align: center;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
}
.row{
padding:15px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 col4">
<div class="content">1x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">1x2</div>
</div>
<div class="col-md-4 col4">
<div class="content">1x3</div>
</div>
</div>
<div class="row ">
<div class="col-md-4 col4">
<div class="content">2x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">2x2</div>
</div>
<div class="col-md-4 col4">
<div class="content">2x3</div>
</div>
</div>
<div class="row col4 col4">
<div class="col-md-4 col4">
<div class="content">3x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
CSS Grid to achieve that layout you desire:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 5px;
position:absolute;
left:50%;
transform:translateX(-50%);
width:80%;
}
.item {
background-color: gray;
text-align: center;
font-size: 30px;
min-height:100px;
max-width: 350px;
}
<div class="grid-container">
<div class="item">1x1</div>
<div class="item">1x2</div>
<div class="item">1x3</div>
<div class="item">2x1</div>
<div class="item">2x2</div>
<div class="item">2x3</div>
<div class="item">3x1</div>
<div class="item">3x2</div>
<div class="item">3x3</div>
</div>
Using flexbox:
.flex-container {
display: flex;
/*Generates a flexbox layout with default flex direction as row */
width: 100%;
/* Not really required */
align-items: center;
/*Aligns contents vertically */
justify-content: center;
/*Aligns contents horizontally */
text-align: center;
/*Aligns further text in the center */
}
.item {
background-color: gray;
text-align: center;
font-size: 30px;
min-height: 400px;
width: 300px;
margin: 5px;
}
<div class="flex-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="flex-container">
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<div class="flex-container">
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
Use float:left; with class content as below:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
float: left;
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.row{
padding: 5px;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="content">1x1</div>
</div>
<div class="col-md-4">
<div class="content">1x2</div>
</div>
<div class="col-md-4">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">2x1</div>
</div>
<div class="col-md-4">
<div class="content">2x2</div>
</div>
<div class="col-md-4">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">3x1</div>
</div>
<div class="col-md-4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
If I'm reading your request correctly, you are just asking how to make it look like the boxes are in the center of the page, and they are evenly spaced. see if this is what you're looking for:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.col-md-4 {
margin: 5px -10px 0px -4px;;
}
play with the numbers until you get the desired location.
Though I would strongly suggest that you add your own class in addition to col-md-4 to the boxes, which will prevent this new setting to col-md-4 from affecting any future use of this bootstrap class.
in other words . . .
CSS:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.box-move {
margin: 5px -10px 0px -4px;;
}
and HTML:
<div class="container">
<div class="row">
<div class="col-md-4 box-move">
<div class="content">1x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">1x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4 box-move">
<div class="content">2x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">2x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4 box-move">
<div class="content">3x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">3x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">3x3</div>
</div>
</div>
</div>
You can remove a lot of the stuff there and simplify it to make it responsive width a set margin:
.contents {
background-color: black;
color: white;
height: 500px;
margin: 20px 0px;
}
<div class="container-fluid text-center">
<div class="row">
<div class="col-md-4">
<div class="contents">1x1</div>
</div>
<div class="col-md-4">
<div class="contents">1x2</div>
</div>
<div class="col-md-4">
<div class="contents">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="contents">2x1</div>
</div>
<div class="col-md-4">
<div class="contents">2x2</div>
</div>
<div class="col-md-4">
<div class="contents">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="contents">3x1</div>
</div>
<div class="col-md-4">
<div class="contents">3x2</div>
</div>
<div class="col-md-4">
<div class="contents">3x3</div>
</div>
</div>
</div>
</div>
I have a table structure with only divs and float left. I want it to be responsive (I know I have to add media queries). There is something wrong in my code. For now I want to reduce the window it changes to horizontal scroll which I tried and it doesn't work.
Here is my code:
<div style="">
<div style="border: 2px solid green;height:100px;width:100%;">
<div style="width:6rem;background:aqua;top: 4.2rem;position:absolute;">FM</div>
<div style="width:6rem;float:left;background:aqua;position: relative;top:2.4rem;">TNT</div>
<div style="text-align:center;float:left;border:1px solid;">
<div style="background:red;">Alarmes</div>
<div style="width:100%;">
<div style="float: left;width:6rem;background:pink;">Criticité</div>
<div style="float: left;width:6rem;background:pink;">Sans Sup</div>
<div style="float: left;width:6rem;background:pink;">Non nominale</div>
</div>
<div>
<div style="float: left;width:6rem;background:gold;">(chart)</div>
<div style="float: left;width:6rem;background:gold;">2</div>
<div style="float: left;width:6rem;background:gold;">5</div>
</div>
<div>
<div style="float: left;width:6rem;background:gold;">(chart)</div>
<div style="float: left;width:6rem;background:gold;">10</div>
<div style="float: left;width:6rem;background:gold;">1</div>
</div>
</div>
<div style="text-align:center;float:left;border:1px solid;">
<div style="background:red;">TICKETS</div>
<div>
<div style="float: left;width:6rem;background:pink;">Non nominale</div>
<div style="float: left;width:6rem;background:pink;">A suivre</div>
<div style="float: left;width:6rem;background:pink;">Clôs</div>
</div>
<div>
<div style="float: left;width:6rem;background:gold;">5</div>
<div style="float: left;width:6rem;background:gold;">-</div>
<div style="float: left;width:6rem;background:gold;">2</div>
</div>
<div>
<div style="float: left;width:6rem;background:gold;">9</div>
<div style="float: left;width:6rem;background:gold;">-</div>
<div style="float: left;width:6rem;background:gold;">0</div>
</div>
</div>
<div style="text-align:center;float:left;border:1px solid;">
<div style="background:red;">SITES</div>
<div>
<div style="float: left;width:6rem;background:pink;">Perte HF</div>
<div style="float: left;width:6rem;background:pink;">-3DB</div>
<div style="float: left;width:6rem;background:pink;">Décro HS</div>
<div style="float: left;width:6rem;background:pink;">Alarme RX</div>
<div style="float: left;width:6rem;background:pink;">Alarme RX</div>
<div style="float: left;width:6rem;background:pink;">GE</div>
</div>
<div>
<div style="float: left;width:6rem;background:gold;">-</div>
<div style="float: left;width:6rem;background:gold;">8</div>
<div style="float: left;width:6rem;background:gold;">3</div>
<div style="float: left;width:6rem;background:gold;">7</div>
<div style="float: left;width:6rem;background:gold;">1</div>
<div style="float: left;width:6rem;background:gold;">6</div>
</div>
<div>
<div style="float: left;width:6rem;background:gold;">-</div>
<div style="float: left;width:6rem;background:gold;">5</div>
<div style="float: left;width:6rem;background:gold;">4</div>
<div style="float: left;width:6rem;background:gold;">8</div>
<div style="float: left;width:6rem;background:gold;">0</div>
<div style="float: left;width:6rem;background:gold;">2</div>
</div>
</div>
</div>
</div>
Step 1. Remove all the styles from the divs
Step 2 use inline-block instead of float.
Step 3 make each table-row enclosed in its own div with display: block except the ones you want alongside each other, which should be inline-block
Step 4 add a width to the parent div and overflow-x: auto;
Step 5 add a non-wrapping parent div around the two sections you want side-by-side, and put each of those in its own div
(if you want to only have the scrolling on the sites section, put that inside the div with class container)
HTML
<div class="container">
<div class="no-wrap">
<div class="side-by-side">
<div class="row">
<div> </div>
</div>
<div class="row">
<div> </div>
</div>
<div class="row">
<div class="aqua">FM</div>
</div>
<div class="row">
<div class="aqua">TNT</div>
</div>
</div><!--/side-by-side-->
<div class="side-by-side">
<div class="row">
<div class="red">Alarmes</div>
</div>
<div class="row">
<div class="pink">Criticité</div>
<div class="pink">Sans Sup</div>
<div class="pink">Non nominale</div>
</div>
<div class="row">
<div class="gold">(chart)</div>
<div class="gold">2</div>
<div class="gold">5</div>
</div>
<div class="row">
<div class="gold">(chart)</div>
<div class="gold">10</div>
<div class="gold">1</div>
</div>
</div>
<div class="side-by-side">
<div class="row">
<div class="red">TICKETS</div>
</div>
<div class="row">
<div class="pink">Non nominale</div>
<div class="pink">A suivre</div>
<div class="pink">Clôs</div>
</div>
<div class="row">
<div class="gold">5</div>
<div class="gold">-</div>
<div class="gold">2</div>
</div>
<div class="row">
<div class="gold">9</div>
<div class="gold">-</div>
<div class="gold">0</div>
</div>
</div>
<div class="side-by-side">
<div class="row">
<div class="double-red">SITES</div>
</div>
<div class="no-wrap">
<div class="side-by-side">
<div class="row">
<div class="pink">Perte HF</div>
<div class="pink">-3DB</div>
<div class="pink">Décro HS</div>
</div>
<div class="row">
<div class="gold">-</div>
<div class="gold">8</div>
<div class="gold">3</div>
</div>
<div class="row">
<div class="gold">-</div>
<div class="gold">5</div>
<div class="gold">4</div>
</div>
</div>
<div class="side-by-side">
<div class="row">
<div class="pink">Alarme RX</div>
<div class="pink">Alarme RX</div>
<div class="pink">GE</div>
</div>
<div class="row">
<div class="gold">7</div>
<div class="gold">1</div>
<div class="gold">6</div>
</div>
<div class="row">
<div class="gold">8</div>
<div class="gold">0</div>
<div class="gold">2</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!--/container-->
CSS
.pink {
display: inline-block;
width:6rem;
background:pink;
}
.gold {
display: inline-block;
width:6rem;
background:gold;
}
.aqua {
width:6rem;
display: inline-block;
background:aqua;
}
.red {
background-color: red;
color: #fff;
width: 18.5rem;
}
.double-red {
background-color: red;
color: #fff;
width: 37.25rem;
}
.container {
width: 18.5rem;
overflow: auto;
}
.row {
display: block;
}
.side-by-side {
display: inline-block;
}
.no-wrap {
width: 37.25rem;
white-space: nowrap;
}
CodePen here: https://codepen.io/vogelbeere/pen/awxQMW
I am looking for ways to add in a 3x3 grid of circle icons to my website. Each icon needs to contain a caption text (including sub-caption text) and be spaced evenly apart. The center icons need to be in the center of the webpage.
I unfortunately have been stuck for the last couple of hours, and I have no idea on how to achieve this. I would appreciate any help.
Here is a mostly flexbox grid with square cells and centered content that will evenly space the circle/text.
* {
box-sizing: border-box; margin: 0; padding: 0;
}
.grid {
display: flex;
flex-wrap: wrap;
max-width: 960px;
width: 90%;
margin: auto;
background: #eee;
}
.cell {
flex-basis: 33.3%;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #fff;
}
.cell:before {
padding-bottom: 100%;
display: block;
content: '';
}
.circle {
background: #ccc;
border-radius: 50%;
width: 100px;
height: 100px;
margin: 0 auto 1em;
}
.inner {
text-align: center;
}
<div class="grid">
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
</div>