I know questions like that have been asked a few thousand times, but this thing drives me crazy.
I'm trying to create a simple popup, the height of the parent is set, if I set the height of the titlebar, it changes nothing.
Hope someone can help me with this, so I don't need to smash my keyboard today.
Thank you.
html {
height: 100vh;
}
#popup-window {
position: absolute;
;
height: 50%;
width: 50%;
background-color: #50ed77;
border: 1px solid #3E3B3B;
border-radius: 5px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 800px;
z-index: 2;
-webkit-box-shadow: 2px 2px #000;
box-shadow: 2px 2px #000;
}
#popup-window-titlebar {
background-color: #21522d;
color: white;
padding: 10px;
font-weight: bold;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#popup-window-inner {
margin: 5px;
max-height: 100%;
height: 100%;
}
#popup-window-list {
margin: 5px;
padding: 10px;
height: 100%;
max-width: 100%;
max-height: 100%;
overflow-y: auto;
}
.window-close-btn {
float: right;
color: #fff;
font-weight: bold;
transition-duration: .5s;
}
.window-close-btn:hover {
cursor: pointer;
color: #ff115c;
}
<div id="popup-window">
<div id="popup-window-titlebar">
<b>Funny Title</b>
<div class="window-close-btn">
X
</div>
</div>
<div id="popup-window-inner">
<div id="popup-window-list">
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
</div>
</div>
</div>
Want to fix the overflow. Googled for 2 hours now and tried different attributes (position, height...)
I would make your popup window flex with a direction of column, then you can make the inner flex grow (to take the remaining height of the popup after the title).
If you then make the inner relative, you can absolutely position your scroll div to fill the inner and then your overflow should work:
html {
height: 100vh;
}
#popup-window {
position: absolute;
height: 50%;
width: 50%;
background-color: #50ed77;
border: 1px solid #3E3B3B;
border-radius: 5px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 800px;
z-index: 2;
-webkit-box-shadow: 2px 2px #000;
box-shadow: 2px 2px #000;
display:flex; /* make this flex with a direction of column */
flex-direction:column;
}
#popup-window-titlebar {
background-color: #21522d;
color: white;
padding: 10px;
font-weight: bold;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#popup-window-inner {
margin: 5px;
flex-grow: 1; /* make this grow to fill remaining space and also relative */
position:relative;
}
#popup-window-list {
position:absolute; /* absolutely position this to fill inner - 5px below replaces your margin */
top:5px;
left:5px;
right:5px;
bottom:5px;
padding: 10px;
overflow-y: auto;
}
.window-close-btn {
float: right;
color: #fff;
font-weight: bold;
transition-duration: .5s;
}
.window-close-btn:hover {
cursor: pointer;
color: #ff115c;
}
<div id="popup-window">
<div id="popup-window-titlebar">
<b>Funny Title</b>
<div class="window-close-btn">
X
</div>
</div>
<div id="popup-window-inner">
<div id="popup-window-list">
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
</div>
</div>
</div>
add overflow and change height of #popup-window
update style
#popup-window-inner {
margin: 5px;
max-height: 100%;
height: 76%;
position: relative;
overflow: hidden;
}
html {
height: 100vh;
}
#popup-window {
position: absolute;
height: 50%;
width: 50%;
background-color: #50ed77;
border: 1px solid #3E3B3B;
border-radius: 5px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 800px;
z-index: 2;
-webkit-box-shadow: 2px 2px #000;
box-shadow: 2px 2px #000;
overflow-y: auto;
}
#popup-window-titlebar {
background-color: #21522d;
color: white;
padding: 10px;
font-weight: bold;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
position: sticky;
top: 0
}
#popup-window-inner {
margin: 5px;
max-height: 100%;
height: 100%;
}
#popup-window-list {
margin: 5px;
padding: 10px;
height: 100%;
max-width: 100%;
max-height: 100%;
}
.window-close-btn {
float: right;
color: #fff;
font-weight: bold;
transition-duration: .5s;
}
.window-close-btn:hover {
cursor: pointer;
color: #ff115c;
}
<div id="popup-window">
<div id="popup-window-titlebar">
<b>Funny Title</b>
<div class="window-close-btn">
X
</div>
</div>
<div id="popup-window-inner">
<div id="popup-window-list">
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
<div>Entry</div>
</div>
</div>
</div>
Related
Is there a way to display divs in a staggered vertical arrangement like this image?
So far I have used Flexbox to get close but can't stagger the rows because I don't want to pre-determine how many circles are in each row, I want the user's browser width to control how many circles are per row (hence no classes or childs on the circle divs).
As the user's browser gets narrower, I want the circles to respond so that in a mobile size they would become 1 long single column.
Here is a Fiddle to show the code so far. I'd be open to JQuery if needed.
Thank you for any help.
* {margin: 0; padding: 0;}
body {font-family: Helvetica Neue; font-style: normal; text-align: center; color: #111;}
section {width: 100%; display: flex; flex-direction: column;}
.memoji_list {display: flex; flex-wrap: wrap; flex-direction: row;}
.memoji {background: green; border-radius:999px; width:100px; height:100px; margin: 0 auto;}
<body>
<section>
<div class="memoji_list">
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
</div>
</section>
</body>
The trick I made for hexagon shapes can be applied here:
.main {
display: flex;
--s: 100px; /* the circle size */
--m: 8px; /* control the distance between circles */
--vc: 10px; /* control the distance between rows */
--f: calc(2*var(--s) + 4*var(--m) - 2*var(--vc) - 2px);
}
.container {
font-size: 0;
}
.container div {
width: var(--s);
margin: var(--m);
height: var(--s);
display: inline-block;
font-size: initial;
border-radius:50%;
background:red;
margin-bottom: calc(var(--m) - var(--vc));
}
.container::before {
content: "";
width: calc(var(--s)/2 + var(--m));
float: left;
height: 120%;
shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px),#000 0 var(--f));
}
<div class="main">
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
.row{
display:flex;
justify-content:space-evenly;
flex-direction:row;
}
.memoji{
width:100px;
height:100px;
background-color:green;
border-radius:50%;
}
<div class='row'>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
</div>
<div class='row'>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
</div>
<div class='row'>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
</div>
This is not responsive (and you have to enlarge the snippet window to "full page" size in order to get the amount of elements into the rows that you have in your image), but it's a starting point, using a max-width and margin: 0 auto for the container and a margin-left for .memoji:nth-child(11n - 4)
You could then use media queries to have different amounts of circles depending on the window width, with similar rules.
* {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica Neue;
font-style: normal;
text-align: center;
color: #111;
}
section {
width: 100%;
max-width: 720px;
margin: 0 auto;
}
.memoji_list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.memoji {
background: green;
border-radius: 999px;
width: 100px;
height: 100px;
margin: 0 auto;
margin: 10px;
}
.memoji:nth-child(11n - 4) {
margin-left: 70px;
}
<body>
<section>
<div class="memoji_list">
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
</div>
</section>
</body>
I'm building out an aggregation of 3d cubes and trying to rotate the aggregated piece. For some reason it's not rotating along the center point.
When I just have an individual cube, it works as expected. When I join 3 cubes into a column, it works as expected. It's just when I join 3 columns into a "section" that the "section" doesn't rotate along the center point.
When the column and cube had this issue it was because I didn't set a proper height and width on them. Am I setting the wrong height and width for the '.section' element? If so, what should it be? An explanation on why my dimensions are wrong would be appreciated as well.
(Sorry for the astronomical code, but SO won't allow just a codepen and the problem doesn't happen with simplified code.)
<div class="scene">
<div class="section col-section">
<div class="col col-back">
<div class="cube">
<div class="cube__face cube__face--front">
<div>front</div>
</div>
<div class="cube__face cube__face--back">
<div>back</div>
</div>
<div class="cube__face cube__face--right">
<div>right</div>
</div>
<div class="cube__face cube__face--left">
<div>left</div>
</div>
<div class="cube__face cube__face--top">
<div>top</div>
</div>
<div class="cube__face cube__face--bottom">
<div>bottom</div>
</div>
</div>
<div class="cube">
<div class="cube__face cube__face--front">
<div>front</div>
</div>
<div class="cube__face cube__face--back">
<div>back</div>
</div>
<div class="cube__face cube__face--right">
<div>right</div>
</div>
<div class="cube__face cube__face--left">
<div>left</div>
</div>
<div class="cube__face cube__face--top">
<div>top</div>
</div>
<div class="cube__face cube__face--bottom">
<div>bottom</div>
</div>
</div>
<div class="cube">
<div class="cube__face cube__face--front">
<div>front</div>
</div>
<div class="cube__face cube__face--back">
<div>back</div>
</div>
<div class="cube__face cube__face--right">
<div>right</div>
</div>
<div class="cube__face cube__face--left">
<div>left</div>
</div>
<div class="cube__face cube__face--top">
<div>top</div>
</div>
<div class="cube__face cube__face--bottom">
<div>bottom</div>
</div>
</div>
</div>
<div class="col col-middle">
<div class="cube">
<div class="cube__face cube__face--front">
<div>front</div>
</div>
<div class="cube__face cube__face--back">
<div>back</div>
</div>
<div class="cube__face cube__face--right">
<div>right</div>
</div>
<div class="cube__face cube__face--left">
<div>left</div>
</div>
<div class="cube__face cube__face--top">
<div>top</div>
</div>
<div class="cube__face cube__face--bottom">
<div>bottom</div>
</div>
</div>
<div class="cube">
<div class="cube__face cube__face--front">
<div>front</div>
</div>
<div class="cube__face cube__face--back">
<div>back</div>
</div>
<div class="cube__face cube__face--right">
<div>right</div>
</div>
<div class="cube__face cube__face--left">
<div>left</div>
</div>
<div class="cube__face cube__face--top">
<div>top</div>
</div>
<div class="cube__face cube__face--bottom">
<div>bottom</div>
</div>
</div>
<div class="cube">
<div class="cube__face cube__face--front">
<div>front</div>
</div>
<div class="cube__face cube__face--back">
<div>back</div>
</div>
<div class="cube__face cube__face--right">
<div>right</div>
</div>
<div class="cube__face cube__face--left">
<div>left</div>
</div>
<div class="cube__face cube__face--top">
<div>top</div>
</div>
<div class="cube__face cube__face--bottom">
<div>bottom</div>
</div>
</div>
</div>
<div class="col col-front">
<div class="cube">
<div class="cube__face cube__face--front">
<div>front</div>
</div>
<div class="cube__face cube__face--back">
<div>back</div>
</div>
<div class="cube__face cube__face--right">
<div>right</div>
</div>
<div class="cube__face cube__face--left">
<div>left</div>
</div>
<div class="cube__face cube__face--top">
<div>top</div>
</div>
<div class="cube__face cube__face--bottom">
<div>bottom</div>
</div>
</div>
<div class="cube">
<div class="cube__face cube__face--front">
<div>front</div>
</div>
<div class="cube__face cube__face--back">
<div>back</div>
</div>
<div class="cube__face cube__face--right">
<div>right</div>
</div>
<div class="cube__face cube__face--left">
<div>left</div>
</div>
<div class="cube__face cube__face--top">
<div>top</div>
</div>
<div class="cube__face cube__face--bottom">
<div>bottom</div>
</div>
</div>
<div class="cube">
<div class="cube__face cube__face--front">
<div>front</div>
</div>
<div class="cube__face cube__face--back">
<div>back</div>
</div>
<div class="cube__face cube__face--right">
<div>right</div>
</div>
<div class="cube__face cube__face--left">
<div>left</div>
</div>
<div class="cube__face cube__face--top">
<div>top</div>
</div>
<div class="cube__face cube__face--bottom">
<div>bottom</div>
</div>
</div>
</div>
</div>
</div>
.scene {
perspective: 600px;
}
.cube {
width: 100px;
height: 100px;
position: relative;
}
.cube__face {
position: absolute;
width: 100px;
height: 100px;
color: white;
font-size: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.cube__face--front {
transform: rotateY(0deg) translateZ(50px);
background-color: pink;
}
.cube__face--right {
transform: rotateY(90deg) translateZ(50px);
background-color: yellow;
}
.cube__face--back {
transform: rotateY(180deg) translateZ(50px);
background-color: green;
}
.cube__face--left {
transform: rotateY(-90deg) translateZ(50px);
background-color: blue;
}
.cube__face--top {
transform: rotateX(90deg) translateZ(50px);
background-color: orange;
}
.cube__face--bottom {
transform: rotateX(-90deg) translateZ(50px);
background-color: magenta;
}
.col {
position: absolute;
transform-style: preserve-3d;
width: 100px;
height: 300px;
}
.col .cube {
position: absolute;
top: 100px;
}
.col .cube:first-child {
top: 0;
}
.col .cube:last-child {
top: 200px;
}
.col-back {
transform: translateZ(-200px);
}
.col-middle {
transform: translateZ(-100px);
}
.section {
transform-style: preserve-3d;
backface-visibility: hidden;
transform: rotateX(0deg);
transition: all 1s linear;
}
.col-section {
width: 100px;
height: 100px;
}
Ok, I was swimming in a sea of ignorance as to the fact that transform-origin accepts a 3rd value that corresponds to the z-axis. Basically, the default transform origin was correct for the x and y access, but I needed a custom one for the z-index to push it back a bit.
transform-origin: 50px 150px -100px;
I've made a table from divs, and I want that every second row is different colored. But every columns are different colored. What is the problem?
.mTable {
display: table;
width: auto;
background-color: #eee;
border: 1px solid #666666;
}
.mTableRow {
display: table-row;
width: auto;
clear: both;
}
.mTableHeading {
display: table-header-group;
background-color: #ddd;
height: auto;
color: black;
text-align: center;
border-bottom: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.mTableCell,
.mTableHead {
display: table-cell;
padding: 5px;
border: 1px solid #999999;
text-align: center;
color: black;
border-bottom: 1px solid #000000;
width: 200px;
background-color: #ccc;
}
.mTableRow>div:nth-child(even) {
background: blue;
}
<div class="mTable">
<div class="mTableRow">
<div class="mTableHead">ID</div>
<div class="mTableHead">Név</div>
<div class="mTableHead">Komment</div>
<div class="mTableHead">Tól</div>
<div class="mTableHead">Ig</div>
</div>
<div class="mTableRow">
<div class="mTableCell">9</div>
<div class="mTableCell">Robi1 </div>
<div class="mTableCell"> </div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">31</div>
<div class="mTableCell">FŰTÉS </div>
<div class="mTableCell">Hőszivattyú teremhőmérsékletek</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">36</div>
<div class="mTableCell">Növényház</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">93</div>
<div class="mTableCell">Üvegház</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">94</div>
<div class="mTableCell">Cserepes fűtés-hűtés</div>
<div class="mTableCell">2017 február 9.-i állapott</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">95</div>
<div class="mTableCell">Cserepes 2017</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">96</div>
<div class="mTableCell">3 fő helyiség</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
</div>
</div>
</div>
</div>
Just your css was wrong replace with this:
.mTableRow:nth-child(even) div {
background: blue;
}
.mTable {
display: table;
width: auto;
background-color: #eee;
border: 1px solid #666666;
}
.mTableRow {
display: table-row;
width: auto;
clear: both;
}
.mTableHeading {
display: table-header-group;
background-color: #ddd;
height: auto;
color : black;
text-align: center;
border-bottom: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.mTableCell, .mTableHead {
display: table-cell;
padding: 5px;
border: 1px solid #999999;
text-align: center;
color : black;
border-bottom: 1px solid #000000;
width: 200px;
background-color: #ccc;
}
.mTableRow:nth-child(even) div {
background: blue;
}
<div class="mTable">
<div class="mTableRow">
<div class="mTableHead">ID</div>
<div class="mTableHead">Név</div>
<div class="mTableHead">Komment</div>
<div class="mTableHead">Tól</div>
<div class="mTableHead">Ig</div>
</div>
<div class="mTableRow">
<div class="mTableCell">9</div>
<div class="mTableCell">Robi1 </div>
<div class="mTableCell"> </div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell">
<button class="w3-button w3-round-xxlarge w3-aqua">Választom</button>
</div>
</div>
<div class="mTableRow">
<div class="mTableCell">31</div>
<div class="mTableCell">FŰTÉS </div>
<div class="mTableCell">Hőszivattyú teremhőmérsékletek</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell">
<button class="w3-button w3-round-xxlarge w3-aqua">Választom</button>
</div>
</div>
<div class="mTableRow">
<div class="mTableCell">36</div>
<div class="mTableCell">Növényház</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell">
<button class="w3-button w3-round-xxlarge w3-aqua">Választom</button>
</div>
</div>
<div class="mTableRow">
<div class="mTableCell">93</div>
<div class="mTableCell">Üvegház</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell">
<button class="w3-button w3-round-xxlarge w3-aqua">Választom</button>
</div>
</div>
<div class="mTableRow">
<div class="mTableCell">94</div>
<div class="mTableCell">Cserepes fűtés-hűtés</div>
<div class="mTableCell">2017 február 9.-i állapott</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell">
<button class="w3-button w3-round-xxlarge w3-aqua">Választom</button>
</div>
</div>
<div class="mTableRow">
<div class="mTableCell">95</div>
<div class="mTableCell">Cserepes 2017</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell">
<button class="w3-button w3-round-xxlarge w3-aqua">Választom</button>
</div>
</div>
<div class="mTableRow">
<div class="mTableCell">96</div>
<div class="mTableCell">3 fő helyiség</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell">
<button class="w3-button w3-round-xxlarge w3-aqua">Választom</button>
</div>
</div>
</div>
</div>
</div>
</div>
You need
.mTableRow:nth-child(odd) {
background: #ccc;
}
.mTableRow:nth-child(even) {
background: blue;
}
as
.mTableRow>div:nth-child(even) {
background: blue;
}
selected the even numbered children of each .mTableRow rather than the row itself.
.mTable {
display: table;
width: auto;
background-color: #eee;
border: 1px solid #666666;
}
.mTableRow {
display: table-row;
width: auto;
clear: both;
}
.mTableHeading {
display: table-header-group;
background-color: #ddd;
height: auto;
color: black;
text-align: center;
border-bottom: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.mTableCell,
.mTableHead {
display: table-cell;
padding: 5px;
border: 1px solid #999999;
text-align: center;
color: black;
border-bottom: 1px solid #000000;
width: 200px;
}
.mTableRow:nth-child(odd) {
background: #ccc;
}
.mTableRow:nth-child(even) {
background: blue;
}
<div class="mTable">
<div class="mTableRow">
<div class="mTableHead">ID</div>
<div class="mTableHead">Név</div>
<div class="mTableHead">Komment</div>
<div class="mTableHead">Tól</div>
<div class="mTableHead">Ig</div>
</div>
<div class="mTableRow">
<div class="mTableCell">9</div>
<div class="mTableCell">Robi1 </div>
<div class="mTableCell"> </div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">31</div>
<div class="mTableCell">FŰTÉS </div>
<div class="mTableCell">Hőszivattyú teremhőmérsékletek</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">36</div>
<div class="mTableCell">Növényház</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">93</div>
<div class="mTableCell">Üvegház</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">94</div>
<div class="mTableCell">Cserepes fűtés-hűtés</div>
<div class="mTableCell">2017 február 9.-i állapott</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">95</div>
<div class="mTableCell">Cserepes 2017</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">96</div>
<div class="mTableCell">3 fő helyiség</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
</div>
</div>
</div>
</div>
Your columns are different because of this:
.mTableRow>div:nth-child(even) {
background: blue;
}
This is colouring every column at even index to blue.
And on of your heading is missing.
.mTable {
display: table;
width: auto;
background-color: #eee;
border: 1px solid #666666;
}
.mTableRow {
display: table-row;
width: auto;
clear: both;
}
.mTableHeading {
display: table-header-group;
background-color: #ddd;
height: auto;
color: black;
text-align: center;
border-bottom: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.mTableCell,
.mTableHead {
display: table-cell;
padding: 5px;
border: 1px solid #999999;
text-align: center;
color: black;
border-bottom: 1px solid #000000;
width: 200px;
background-color: #ccc;
}
.mTableRow>div:nth-child(even) {
background: blue;
}
<div class="mTable">
<div class="mTableRow">
<div class="mTableHead">ID</div>
<div class="mTableHead">Név</div>
<div class="mTableHead">Komment</div>
<div class="mTableHead">Tól</div>
<div class="mTableHead">Ig</div>
<div class="mTableHead">Missing</div>
</div>
<div class="mTableRow">
<div class="mTableCell">9</div>
<div class="mTableCell">Robi1 </div>
<div class="mTableCell"> </div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">31</div>
<div class="mTableCell">FŰTÉS </div>
<div class="mTableCell">Hőszivattyú teremhőmérsékletek</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">36</div>
<div class="mTableCell">Növényház</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">93</div>
<div class="mTableCell">Üvegház</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">94</div>
<div class="mTableCell">Cserepes fűtés-hűtés</div>
<div class="mTableCell">2017 február 9.-i állapott</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">95</div>
<div class="mTableCell">Cserepes 2017</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
<div class="mTableRow">
<div class="mTableCell">96</div>
<div class="mTableCell">3 fő helyiség</div>
<div class="mTableCell">Sablon komment</div>
<div class="mTableCell">null</div>
<div class="mTableCell">null</div>
<div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
</div>
</div>
</div>
</div>
</div>
Try this.
<style type="text/css">
.TFtableCol{
width:100%;
border-collapse:collapse;
}
.TFtableCol td{
padding:7px; border:#4e95f4 1px solid;
}
/* improve visual readability for IE8 and below */
.TFtableCol tr{
background: #b8d1f3;
}
/* Define the background color for all the ODD table columns */
.TFtableCol tr td:nth-child(odd){
background: #b8d1f3;
}
/* Define the background color for all the EVEN table columns */
.TFtableCol tr td:nth-child(even){
background: #dae5f4;
}
</style>
<table class="TFtableCol">
<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
</table>
Parent hasnt got a defined width because there are unknown number of children inside.
Why do children fall into new line and how to prevent that? Children need to be on the same line.
.wrap {
position: absolute;
left: 50%;
top: 50px;
height:40px;
transform: translateX(-50%);
}
.box {
width:40px;
height:40px;
float:left;
background:red;
margin-right:1px;
}
<div class="wrap">
<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
You should consider using flex-box.
And to answer your question: floated DIVs are not supposed and will not expand their parent's width, as they are 'floating' above the content flow.
Absolute positioned block elements will have an initial width of zero, if not specified otherwise. Thus, they're behaving differently than usual.
The floating elements indeed behave as usual: as the parent element provides not enough width (zero!) to display them all in one line, of course they break to the next line.
.wrap {
display: flex;
justify-content: center;
flex-wrap: nowrap;
margin-top: 50px;
}
.box {
width:40px;
height:40px;
float:left;
background:red;
margin-right:1px;
}
<div class="wrap">
<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
Since you are using left: 50%, the maximum width of .wrap is the 50% remaining of body.
That's why the wrap is happening.
To avoid it, add more space to it with margin-right: -50%. This will give it an aditional 50% (that is the space lost with the left: 50% style)
.wrap {
position: absolute;
left: 50%;
margin-right: -50%;
top: 50px;
height:40px;
transform: translateX(-50%);
}
.box {
width:40px;
height:40px;
float:left;
background:red;
margin-right:1px;
}
<div class="wrap">
<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
What happens here is that when you use translate the element is visually re-positioned, though from a document flow perspective it is still positioned at 50% left.
So as you can see in this sample, they wrap at the same time though one think that the first shouldn't as there is space left, but there isn't, as technically the first has the same position as the second, hence it wrap at the same time.
.wrap {
position: absolute;
left: 50%;
top: 150px;
height:40px;
}
.wrap.translate {
top: 50px;
transform: translateX(-50%);
}
.box {
width:40px;
height:40px;
float:left;
background:red;
margin-right:1px;
}
<div class="wrap translate">
<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
<div class="wrap">
<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
The simplest and best way to solve this is to make the wrap an inline-block and set text-align: center on its parent, in this case the body
body {
text-align: center;
}
.wrap {
display: inline-block;
height:40px;
}
.box {
width:40px;
height:40px;
float:left;
background:red;
margin-right:1px;
}
<div class="wrap">
<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
Yet another is to make the box's inline-block and set text-align: center on the wrap
Note, to defeat the white space between inline block elements, I also change the markup so each box's end and start tag are on the same line. Here is a few more ways to solve that: how-to-remove-the-space-between-inline-block-elements
.wrap {
height:40px;
text-align: center;
}
.box {
display: inline-block;
width:40px;
height:40px;
background:red;
margin-right:1px;
}
<div class="wrap">
<div class="box">0
</div><div class="box">1
</div><div class="box">2
</div><div class="box">3
</div><div class="box">4
</div><div class="box">5
</div><div class="box">6
</div><div class="box">7
</div><div class="box">8
</div><div class="box">9
</div><div class="box">10
</div>
</div>
If you don't need to support older browsers you can also use Flexbox
.wrap {
display: flex;
justify-content: center;
height:40px;
}
.box {
width:40px;
height:40px;
background:red;
margin-right:1px;
}
<div class="wrap">
<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
Use center class :
.wrap {
text-align: center;
margin: 50px auto 0 auto;
height:40px;
}
.center {
display: inline-block;
}
.box {
width: 40px;
height:40px;
float:left;
background:red;
margin-right:1px;
}
#media all and (max-width: 474px) {
.box {
width: 25px;
}
}
<div class="wrap">
<div class="center">
<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
</div>
so I have a strange issue,
I have this html:
<div class="container">
<div class="row">
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
</div>
</div>
and then I have this CSS
html,
body {
padding: 0;
margin: 0;
}
.container {
height: 100vh;
display: flex;
}
.row {
display: flex;
padding: 50px 20px 20px;
}
.flex-column {
background-color: pink;
width: auto;
margin-right: 100px;
width: 280px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
padding: 20px 0 0 20px;
}
.box {
background-color: blue;
width: 120px;
height: 120px;
margin: 0 20px 20px 0;
}
If I use it like that, the content all tries to fit in the rows width, which is not what I want. I would like the row to expand (and present a scrollbar) depending on how much content is in it.
Now, by accident I noticed that if I add the flex-column class to the row, it fixes it (sort of). You can see with the background colours that it isn't doing everything correctly, but the side effect is that it actually works the way I want it to.
My question is how can I get it to wrap the row around the content but still have the scroll bar?
Here is the codepen to show what I currently have.
http://codepen.io/r3plica/pen/waPoQo
if you remove the flex-column class from the row, you will see the issue.
Do you have to use flexbox? You can do it without it. I have posted a flex and a non-flex example. If you want to use flex, you have to make sure you that you have a block container element around your flex element with overflow:scroll. Also your main flex element inside your container needs to be set to float so that it will properly expand horizontally to include your inline-block child elements.
Non-Flex Example:
html,
body {
padding: 0;
margin: 0;
}
.row {
background-color: red !important;
display: block;
padding: 50px 20px 20px;
overflow:scroll;
white-space:nowrap;
}
.flex-column {
background-color: pink;
display: inline-block;
margin-right: 100px;
padding: 20px 0 0 20px;
width: 280px;
vertical-align:top;
}
.box {
background-color: blue;
display: block;
float: left;
height: 120px;
margin: 0 20px 20px 0;
width: 120px;
}
<div class="container">
<div class="row">
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
</div>
</div>
Flex Example:
html,
body {
padding: 0;
margin: 0;
}
.container{
display:block;
overflow:auto;
}
.row {
background-color: red !important;
display: flex;
padding: 50px 20px 20px;
overflow:scroll;
white-space:nowrap;
float:left;
}
.flex-column {
background-color: pink;
display: inline-block;
margin-right: 100px;
padding: 20px 0 0 20px;
width: 280px;
vertical-align:top;
}
.box {
background-color: blue;
display: block;
float: left;
height: 120px;
margin: 0 20px 20px 0;
width: 120px;
}
<div class="container">
<div class="row">
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="flex-column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
</div>
</div>