Absolute positioned elements are not displayed with in scrollable element - html

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>

Related

Flex nested item overflow

I want to have the part under "foo" totally scrollable, yet I haven't been able to achieve it using flexbox. I've tried it with min-height, but without any success.
https://jsfiddle.net/szd5tvfc/2/
$('.ui.dropdown')
.dropdown();
.ui.vertical.menu {
display: flex;
flex-direction: column;
}
.ui.vertical.menu>.overflowing.item,
.ui.vertical.menu>.overflowing.item>.menu {
display: flex;
flex-direction: column;
min-height: 0;
overflow: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ui vertical menu">
<div class="item">
<h3 class="ui header">Select foos</h3>
<div class="ui icon search input">
<i class="search icon"></i>
<input type="text" placeholder="Search foo..." />
</div>
</div>
<div class="item">
Selected foos
<div class="scrolling menu">
<div class="item">
<div class="content">foo name</div>
</div>
</div>
</div>
<div class="overflowing item">
foos
<div class="scrolling menu">
<div class="item">
<div class="content">Foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
</div>
</div>
</div>

For the overflow property to work, there needs to be a defined height somewhere along the line. Otherwise, how does the property know where to overflow? It will just keep extending the box.
Try this.
.ul.vertical.menu { height: 100vh; }
.overflowing.item { flex-basis: 1px; flex-grow: 1; }
.ui.vertical.menu {
display: flex;
flex-direction: column;
height: 100vh;
}
.ui.vertical.menu>.overflowing.item {
flex-basis: 1px;
flex-grow: 1;
}
.ui.vertical.menu>.overflowing.item,
.ui.vertical.menu>.overflowing.item>.menu {
display: flex;
flex-direction: column;
min-height: 0;
overflow: auto;
}
<div class="ui vertical menu">
<div class="item">
<h3 class="ui header">Select foos</h3>
<div class="ui icon search input">
<i class="search icon"></i>
<input type="text" placeholder="Search foo..." />
</div>
</div>
<div class="item">
Selected foos
<div class="scrolling menu">
<div class="item">
<div class="content">foo name</div>
</div>
</div>
</div>
<div class="overflowing item">
foos
<div class="scrolling menu">
<div class="item">
<div class="content">Foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
</div>
</div>
</div>
jsFiddle demo

Add this CSS to your code:
.ui.vertical.menu {
display: flex;
flex-direction: column;
height: 100vh;
justify-content: stretch;
}
.ui.vertical.menu>.overflowing.item,
.ui.vertical.menu>.overflowing.item>.menu {
display: flex;
flex-direction: column;
min-height: 0;
overflow: auto;
flex-shrink: 1;
flex-grow: 1;
}
It uses justifycontent: strech; and the flex-shrink/flex-grow properties.
Here is the link to a fully functional fiddle: jsfiddle.
Note that the flex parent's height can be adjusted freely and it won't cause any sort of extra scrollbars or anything.

I'm not sure if I understood what you want but to get scroll you need to set max-height instead min-height.
.ui.vertical.menu {
display: flex;
flex-direction: column;
}
.ui.vertical.menu>.overflowing.item,
.ui.vertical.menu>.overflowing.item>.menu {
display: flex;
flex-direction: column;
max-height: 200px;
overflow: auto;
}
Check the changes below
https://jsfiddle.net/r4bxu5ep/

How can I prevent text from going out of the grid (make in centered)?

I am designing this website for my introductory course. They require flex/grid layouts (although we didn't cover this in class). I decided to follow a youtube tutorial that was making a grid with 3 columns (1fr each). It then added a background to every "cell". In every "cell" I have a title and a description. I want to style the title and description in each "cell" to always be in the center, no matter the sizing of the page. I have managed to make the text adjust its size to the dimension of the page, but the title still overflows to the right when I minimize the window's width.
This is what I mean by overflow:
As you might guess, when the width is too large, the title tends to go to the right. This is the code (I no longer have images as background but you get the idea):
const portfolioItems = document.querySelectorAll('.portfolio-item-wrapper');
portfolioItems.forEach(portfolioItem => { //pentru fiecare item din portofolioItem vad cand am mouse pe el
portfolioItem.addEventListener('mouseover', () => {
portfolioItem.childNodes[1].classList.add('img-darken');//si cand am mouse-ul pe el iau primul copil
//care este portofolio-img-background
})
portfolioItem.addEventListener('mouseout', () => {
portfolioItem.childNodes[1].classList.remove('img-darken');
})
})
.portfolio-items-wrapper{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.portfolio-item-wrapper{
position:relative;
}
.portfolio-img-background{
height:350px;
width: auto;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.portfolio-img-background:nth-of-type(odd)
{
background-color: maroon;
}
.portfolio-img-background:nth-of-type(even)
{
background-color: rgb(101, 172, 122);
}
.title-text-wrapper{
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items:center;
height: 100%;
text-align: center;
padding-left: 100px;
padding-right: 100px;
}
#italian{
font-family: 'Pacifico', cursive;
}
#american{
font-family: 'Mitr';
}
.title-wrapper div{
justify-content: center;
font-size:5vw;
color: white;
align-items: center;
text-align: center;
align-content: center;
}
/* Needs to be more specific with selector*/
.title-text-wrapper .subtitle{
transition: 1s;
font-weight: 600;
color: transparent;
align-self: center;;
}
.title-text-wrapper:hover .subtitle{
font-weight: 600;
color: lightseagreen;
}
.img-darken{
transition: 1s;
filter: brightness(10%);
}
.logo-wrapper{
width: 50%;
margin-bottom: 2px;
}
<div class="content-wrapper">
<div class="portfolio-items-wrapper">
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio1.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="american">American</div>
</div>
<div class="subtitle">
This is a description of american food.
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio2.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="italian">Italian</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio3.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="chinese">Asian</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio4.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="mexican">Mexican</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio5.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="romanian">Romanian</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio8.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="barbeque">Barbeque</div>
</div>
<div class="subtitle">
Item
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio9.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="indian">Indian</div>
</div>
<div class="subtitle">
Item
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio10.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="chinese">Chinese</div>
</div>
<div class="subtitle">
Item
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio11.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="mediteranean">Mediteranean</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio12.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="desserts">Desserts</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio6.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="smoothies">Smoothies</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio7.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="coffee">Coffee</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
</div>
</div>
I'm a beginner at this, so I would appreciate your advice on anything that's wrong with this code.

Issue is you are using padding left right to make item in center, I removed that and make its width:100% as you are using flex so its align center already
const portfolioItems = document.querySelectorAll('.portfolio-item-wrapper');
portfolioItems.forEach(portfolioItem => { //pentru fiecare item din portofolioItem vad cand am mouse pe el
portfolioItem.addEventListener('mouseover', () => {
portfolioItem.childNodes[1].classList.add('img-darken');//si cand am mouse-ul pe el iau primul copil
//care este portofolio-img-background
})
portfolioItem.addEventListener('mouseout', () => {
portfolioItem.childNodes[1].classList.remove('img-darken');
})
})
.portfolio-items-wrapper{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.portfolio-item-wrapper{
position:relative;
}
.portfolio-img-background{
height:350px;
width: auto;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.portfolio-img-background:nth-of-type(odd)
{
background-color: maroon;
}
.portfolio-img-background:nth-of-type(even)
{
background-color: rgb(101, 172, 122);
}
.title-text-wrapper {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
width: 100%;
}
#italian{
font-family: 'Pacifico', cursive;
}
#american{
font-family: 'Mitr';
}
.title-wrapper div{
justify-content: center;
font-size:5vw;
color: white;
align-items: center;
text-align: center;
align-content: center;
}
/* Needs to be more specific with selector*/
.title-text-wrapper .subtitle{
transition: 1s;
font-weight: 600;
color: transparent;
align-self: center;
}
.title-text-wrapper:hover .subtitle{
font-weight: 600;
color: lightseagreen;
}
.img-darken{
transition: 1s;
filter: brightness(10%);
}
.logo-wrapper{
width: 50%;
margin-bottom: 2px;
}
<div class="content-wrapper">
<div class="portfolio-items-wrapper">
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio1.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="american">American</div>
</div>
<div class="subtitle">
This is a description of american food.
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio2.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="italian">Italian</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio3.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="chinese">Asian</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio4.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="mexican">Mexican</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio5.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="romanian">Romanian</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio8.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="barbeque">Barbeque</div>
</div>
<div class="subtitle">
Item
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio9.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="indian">Indian</div>
</div>
<div class="subtitle">
Item
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio10.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="chinese">Chinese</div>
</div>
<div class="subtitle">
Item
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio11.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="mediteranean">Mediteranean</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio12.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="desserts">Desserts</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio6.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="smoothies">Smoothies</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio7.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="coffee">Coffee</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
</div>
</div>

Table structure without table tags, only divs

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

3x3 circle icon grid with caption

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>

Background color cuts off at viewport edge

I'm trying to create a row of divs that do not wrap and is scrollable with the regular page scrollbar (horizontal and vertical).
Only problem with my solution below is that the background-color (and right padding) of the row are not shown if I scroll to the right.
Requirements:
I don't want scrollbars in the rows, only want to see a (horizontal and vertical) page scrollbar
The background color of the rows are going to the end of the row (not like in the demo)
Don't use a fixed width, because the width depends on the number of columns and they may grow in the future.
It's ok to use flexbox, etc.
.row {
background-color: #CCC;
padding: 30px;
white-space: nowrap;
}
.row:nth-child(odd) {
background-color: #AAA;
}
.column {
display: inline-block;
width: 50%;
margin-right: 5%;
white-space: normal;
vertical-align: top;
}
.column:last-of-type {
margin-right: 0;
}
.item {
padding: 10px;
background-color: #FFF;
margin-bottom: 10px;
border: 1px solid black;
}
.item:last-of-type {
margin-bottom: 10px;
}
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>

In addition to #Michael_B's well explained answer, another solution would be to use display: inline-block on the row, which, in opposite to block, grows with its content.
As you can't set a width on the row (will stop it from growing with content), you need to use viewport units (or any other unit other than percent) when setting the width and margin on the column, so with the given markup, where the row is set to take full width of the viewport, this might be a viable option.
.row {
background-color: #CCC;
padding: 30px;
white-space: nowrap;
display: inline-block;
}
.row:nth-child(odd) {
background-color: #AAA;
}
.column {
display: inline-block;
width: 50vw;
white-space: normal;
vertical-align: top;
margin-right: 5vw;
}
.column:last-of-type {
margin-right: 0;
}
.item {
padding: 10px;
background-color: #FFF;
margin-bottom: 10px;
border: 1px solid black;
}
.item:last-of-type {
margin-bottom: 10px;
}
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
<div class="column">
<div class="item">
Item
</div>
<div class="item">
Item
</div>
</div>
</div>

A block element by default extends to 100% width of its parent.
In your layout, that is exactly what is happening. The background-color on .row is covering the full with of its parent, body. Any overflow would not be included.
Therefore, instead of putting the background color on each .row element, put it on body.
Add this to your code:
body {
background-color: #ccc;
margin: 0;
}
The collapsing right padding appears to be caused by the element being "over-constrained". When this happens, the right margin / padding is ignored.
You can read more about that here: How can I stop the last margin collapsing in flexbox?
To fix the problem in your layout, try using a transparent border instead of padding.
Add this to your code:
.column:last-child {
border-right: 30px solid transparent;
}
body {
background-color: #ccc;
margin: 0;
}
.row {
display: flex;
padding: 30px;
white-space: nowrap;
}
.column {
flex: 0 0 50%;
white-space: normal;
}
.column + .column {
margin-left: 30px;
}
.column:last-child {
border-right: 30px solid transparent;
}
.item {
padding: 10px;
background-color: #FFF;
margin-bottom: 10px;
border: 1px solid black;
<div class="row">
<div class="column">
<div class="item">Item</div>
<div class="item">Item</div>
</div>
<div class="column">
<div class="item">Item</div>
<div class="item">Item</div>
</div>
<div class="column">
<div class="item">Item</div>
<div class="item">Item</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">Item</div>
<div class="item">Item</div>
</div>
<div class="column">
<div class="item">Item</div>
<div class="item">Item</div>
</div>
<div class="column">
<div class="item">Item</div>
<div class="item">Item</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">Item</div>
<div class="item">Item</div>
</div>
<div class="column">
<div class="item">Item</div>
<div class="item">Item</div>
</div>
<div class="column">
<div class="item">Item</div>
<div class="item">Item</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="item">Item</div>
<div class="item">Item</div>
</div>
<div class="column">
<div class="item">Item</div>
<div class="item">Item</div>
</div>
<div class="column">
<div class="item">Item</div>
<div class="item">Item</div>
</div>
</div>
jsFiddle