Getting inline block elements to take up all white space - html

I am trying to stack elements on top of each other. In my situation I have elements with different heights that leads to unwanted white space.
I am looking for 6 and 7 boxes to move up with all corresponding elements under them.
.blockParent {
text-align: center;
position: relative;
width: 90%;
left: 5%;
}
.block {
position: relative;
display: inline-block;
width: 500px;
background-color: red;
height: 200px;
margin: 5px;
}
.smaller {
height: 100px;
vertical-align: top;
}
<div class="blockParent">
<div class="block">
</div>
<div class="block">
</div>
<div class="block smaller">
</div>
<div class="block smaller">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block ">
</div>
<div class="block">
</div>
<div class="block">
</div>
</div>
Results in this:
I think flexbox might be a solution but I have no experience with flexbox.
Any ideas? Thanks in advance!


Flexbox wasn't designed to solve that. You can use CSS multi-columns instead. Note, the display order changes from horizontal to vertical.
.blockParent {
column-count: 3;
}
.block {
display: inline-block;
vertical-align: top;
background-color: silver;
width: 100%;
height: 200px;
margin: 5px;
}
.smaller {
height: 100px;
}
<div class="blockParent">
<div class="block"></div>
<div class="block"></div>
<div class="block smaller"></div>
<div class="block smaller"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block "></div>
<div class="block"></div>
<div class="block"></div>
</div>


.blockParent {
text-align: center;
position: relative;
width: 90%;
/* left: 5%; */
margin: 0 auto;
}
.block {
position: relative;
display: inline-flex;
width: 500px;
background-color: red;
height: 200px;
margin: 5px;
}
<div class="blockParent">
<div class="block">
</div>
<div class="block">
</div>
<div class="block smaller">
</div>
<div class="block smaller">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block ">
</div>
<div class="block">
</div>
<div class="block">
</div>
</div>
https://s.codepen.io/fasiya656/debug/NOrNQN/XxkVwaPeaooM

Related

Flex nowrap container not wrapping child. when the width of those are in mentioned in percentage

I have a flex container that wraps some cards. I have implemented a horizontal scroller with flex(using flex-nowrap). The flex wrapper container is subjected to have a 36px left spacing and a 0px right spacing initially. The catch here is after the last card is scrolled I need to have a 36px right spacing.
here is what I did so far
*{
box-sizing: border-box;
}
h2 {
margin: 0;
}
body {
background: cadetblue;
}
.container {
width: 500px;
margin: 0 auto;
background: #000;
padding: 20px 36px;
}
.scroll-wrapper {
overflow: hidden;
margin-right: -36px;
}
.scroll-inner {
display: flex;
flex-flow: row nowrap;
overflow: auto;
margin: 0px -16px;
}
.card {
height: 250px;
width: 75%;
flex: 1 0 75%;
padding: 0px 16px;
}
.inner-wrapper {
background: #fff;
height: 250px;
}
<div class="container">
<div class="scroll-wrapper">
<div class="scroll-inner">
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
</div>
</div>
</div>
I have given a negative right margin for the wrapper to make it look like it's flowing from the right.
Once the last element is scrolled/reached I want it to look something like this
enter image description here
One thing I noticed is my scroll-inner(flex-nowrap) is not wrapping up the entire children. I presumed if we have five children each having width 50px. The scroll-inner should show a scrollable width of 250px, Unfortunately, it's not how flex is behaving. Any help or suggestion is much appreciated.
Updating few images that show what I'm really looking for
During scrolling
After scrolling till the last card

Try
.scroll-wrapper {
overflow: hidden;
margin: auto;
}
.scroll-inner {
display: flex;
flex-flow: row nowrap;
overflow: auto;
margin: auto;
}

I have found a fix and hope this help someone.
*{
box-sizing: border-box;
}
h2 {
margin: 0;
}
body {
background: cadetblue;
}
.container {
width: 500px;
margin: 0 auto;
background: #000;
padding: 20px 36px;
}
.scroll-wrapper {
overflow: hidden;
margin-right: -36px;
}
.scroll-inner {
display: flex;
flex-flow: row nowrap;
overflow: auto;
margin: 0px;
}
.card {
height: 250px;
width: 75%;
flex: 1 0 75%;
padding-right: 40px;
margin-right: -8px;
}
.inner-wrapper {
background: #fff;
height: 250px;
}
<div class="container">
<div class="scroll-wrapper">
<div class="scroll-inner">
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
</div>
</div>
</div>
Please do answer if someone has a better solution!! Thanks

How to equally space empty divs with CSS only in flex?

So I have a structure pretty similar to the snippet below.
The issue I have is that I am trying to make it so that the divs such as child always take the same height relative to the container even if they are empty. So if there are two children they have to be 50% of the parent if there are three children 33.3% of the parent and ec.
Did a lot of digging, tried usingflex-grow and setting it on the children, adding an after content on the childContent class if it was empty but the empty children still collapse.
Is it even possible to achieve equal heights on the children without using js and fixed heights and if yes how?
.container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
overflow: auto;
}
.child {
height: 100%;
display: flex;
flex-direction: column;
}
.childHeader {
display: flex;
flex-direction: row;
}
.headerItem {
background-color: red;
}
.childContent {
background-color: white;
}
.childContent:empty:after {
content: '.';
visibility: hidden;
min-height: 300px;
}
.contentItem {
background-color: skyblue;
border: 3px solid black;
}
<div class="container">
<div class="child">
<div class="childHeader">
<div class="headerItem">1</div>
<div class="headerItem">2</div>
<div class="headerItem">3</div>
<div class="headerItem">4</div>
<div class="headerItem">5</div>
<div class="headerItem">6</div>
<div class="headerItem">7</div>
</div>
<div class="childContent">
<div class="contentItem">1</div>
<div class="contentItem">2</div>
<div class="contentItem">3</div>
<div class="contentItem">4</div>
<div class="contentItem">5</div>
<div class="contentItem">6</div>
<div class="contentItem">7</div>
</div>
</div>
<div class="child">
<div class="childHeader">
<div class="headerItem">1</div>
<div class="headerItem">2</div>
<div class="headerItem">3</div>
<div class="headerItem">4</div>
<div class="headerItem">5</div>
<div class="headerItem">6</div>
<div class="headerItem">7</div>
</div>
<div class="childContent">
</div>
</div>
<div class="child">
<div class="childHeader">
<div class="headerItem">1</div>
<div class="headerItem">2</div>
<div class="headerItem">3</div>
<div class="headerItem">4</div>
<div class="headerItem">5</div>
<div class="headerItem">6</div>
<div class="headerItem">7</div>
</div>
<div class="childContent">
</div>
</div>
</div>

Check this out, I'm not really sure if this is what you want to do.
I just added min-height: calc(100vh - 60px); in your .childContent
.container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
overflow: auto;
}
.child {
display: flex;
flex-direction: column;
}
.childHeader {
display: flex;
flex-direction: row;
}
.headerItem {
display:flex;
flex-basis:100%;
background-color: red;
}
.childContent {
background-color: grey;
position: relative;
display: block;
min-height: calc(80vh - 60px);
}
.childContent:empty::after {
content: '.';
visibility: hidden;
}
.contentItem {
background-color: skyblue;
border: 3px solid black;
}
<div class="container">
<div class="child">
<div class="childHeader">
<div class="headerItem">1</div>
<div class="headerItem">2</div>
<div class="headerItem">3</div>
<div class="headerItem">4</div>
<div class="headerItem">5</div>
<div class="headerItem">6</div>
<div class="headerItem">7</div>
</div>
<div class="childContent">
<div class="contentItem">1</div>
<div class="contentItem">2</div>
<div class="contentItem">3</div>
<div class="contentItem">4</div>
<div class="contentItem">5</div>
<div class="contentItem">6</div>
<div class="contentItem">7</div>
</div>
</div>
<div class="child">
<div class="childHeader">
<div class="headerItem">1</div>
<div class="headerItem">2</div>
<div class="headerItem">3</div>
<div class="headerItem">4</div>
<div class="headerItem">5</div>
<div class="headerItem">6</div>
<div class="headerItem">7</div>
</div>
<div class="childContent">
</div>
</div>
<div class="child">
<div class="childHeader">
<div class="headerItem">1</div>
<div class="headerItem">2</div>
<div class="headerItem">3</div>
<div class="headerItem">4</div>
<div class="headerItem">5</div>
<div class="headerItem">6</div>
<div class="headerItem">7</div>
</div>
<div class="childContent">
</div>
</div>
</div>
Check this one out https://developer.mozilla.org/en-US/docs/Web/CSS/calc

How to always center window with grid but not elements?

how can I have my grid container always stay centered but the elements with fixed width are still floating left, even on breaking? Just like in my example, but as shown, its not centered. Is there a need of js or is it fixable with css only? Thanks.
Here what I mean:
#wrap {
width: 100%;
background: #f8f8f8;
height: 300px;
}
#container {
width: 100%;
max-width: 400px;
background: #f1f1f1;
margin: auto;
}
#item {
background: white;
height: 50px;
width: 50px;
float: left;
padding: 5px;
}
#item1 {
width: 100%;
height: 100%;
background: red;
}
<div id="wrap">
<div id="container">
<div id="item">
<div id="item1"></div>
</div>
<div id="item">
<div id="item1"></div>
</div>
<div id="item">
<div id="item1"></div>
</div>
<div id="item">
<div id="item1"></div>
</div>
<div id="item">
<div id="item1"></div>
</div>
<div id="item">
<div id="item1"></div>
</div>
<div id="item">
<div id="item1"></div>
</div>
<div id="item">
<div id="item1"></div>
</div>
<div id="item">
<div id="item1"></div>
</div>
<div id="item">
<div id="item1"></div>
</div>
</div>
</div>

Note: Use class for multiple items instead of id. Same id should not be repeated in the code.
You can use Flexbox here. Use justify-content:center for align center of items.
Stack Snippet
#wrap {
width: 100%;
background: #f8f8f8;
height: 300px;
}
#container {
width: 100%;
max-width: 400px;
background: #f1f1f1;
margin: auto;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.item {
background: white;
height: 50px;
width: 50px;
padding: 5px;
box-sizing: border-box;
}
.item1 {
width: 100%;
height: 100%;
background: red;
}
<div id="wrap">
<div id="container">
<div class="item">
<div class="item1"></div>
</div>
<div class="item">
<div class="item1"></div>
</div>
<div class="item">
<div class="item1"></div>
</div>
<div class="item">
<div class="item1"></div>
</div>
<div class="item">
<div class="item1"></div>
</div>
<div class="item">
<div class="item1"></div>
</div>
<div class="item">
<div class="item1"></div>
</div>
<div class="item">
<div class="item1"></div>
</div>
<div class="item">
<div class="item1"></div>
</div>
<div class="item">
<div class="item1"></div>
</div>
</div>
</div>

Make flexbox grid have a horizontal scroll bar on mobile

I'm trying to figure out how to make a table have a bottom horizontal scroll bar. This is my HTML:
<div class="grid-block table">
<div class="grid-block header">
<div class="grid-block small-2 column">
times 6
</div>
</div>
<div class="grid-block row">
<div class="grid-block small-2 column">
times 6
</div>
</div>
</div>
I have used this CSS thinking it would fix my problem.
.table {
overflow: auto !important;
width: 1400px !important;
}
I've added the importants at the moment just to make sure these stylings are applied.
I should also point out that every element here is a flex item.
Cheers

This code might help you get started.
.wrapper {
width: 100%;
overflow: auto;
white-space: nowrap;
font-size: 0;
}
.wrapper .child {
font-size: 1rem;
height: 50px;
width: 60px;
display: inline-block;
background-color: cornflowerblue;
text-align: center;
border: 1px solid coral;
margin-left: 10px;
}
.wrapper .child:first-child {
margin-left: 0px;
}
<div class="wrapper">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
<div class="child">10</div>
</div>

Using Skeleton Boilerplate; Vertical align the container

I want to vertical center my container. Anyone knows how to do this using the Skeleton boilerplate? I've tried some things, but it continues to stay on top instead of vertical align. Hope someone can help me out:)
HTML:
<div class="container">
<div class="sixteen columns">
<h1 class="remove-bottom"></h1>
</div>
<div class="one-third column">
<div class="middle-wrapper">
</div>
</div>
<div class="one-third column">
<div class="middle-wrapper">
</div>
</div>
<div class="one-third column">
<div class="middle-wrapper">
</div>
</div>
</div>
CSS:
/* Base 960 Grid */
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.container .column,
.container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row { margin-bottom: 20px; }

Some browsers like 'margin: 0px auto'.
Change your margin: 0 auto to 'margin: 0px auto;'

try this.
not for skeleton framework though. An example -better dont override container and column classes Have new classes for them and override
<div class="container top">
<div class="between"
<div class="sixteen columns middle">
<h1 class="remove-bottom"></h1>
</div>
<div class="one-third column">
<div class="middle-wrapper">
</div>
</div>
<div class="one-third column">
<div class="middle-wrapper">
</div>
</div>
<div class="one-third column">
<div class="middle-wrapper">
</div>
</div>
</div>
</div>
CSS
.top{
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.between{
display: table-cell;
vertical-align: middle;
}
.middle{
margin: 10px auto;
width: 960px;
}