This question already has answers here:
How to prevent column break within an element?
(19 answers)
Closed 4 years ago.
I have the following (codepen)
.container{column-count:2; width: 50%; border: 1px solid;}
.entry{border: 1px dotted red;}
<div class="container">
<div class="entry">
<h3>header 1</h3>
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
</div>
<div class="entry">
<h3>header 1</h3>
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
</div>
<div class="entry">
<h3>header 1</h3>
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
</div>
<div class="entry">
<h3>header 1</h3>
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
</div>
<div class="entry">
<h3>header 1</h3>
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
</div>
</div>
is there a way to keep the "red" blocks to be inseparable? I mean, pass to the second column entirely, as a whole block?
Adding display: inline-block to the entry class should work.
CSS:
.container{
column-count: 2;
width: 50%;
border: 1px solid;
}
.entry{
border: 1px dotted red;
display: inline-block;
width: 100%;
}
Related
Here's a codepen illustrating the issue: https://codepen.io/robertcooper_rc/pen/jOYbdbR
I'm using a CSS grid to create a table layout. It's been working well, but I'm having an issue with the behavior of position: sticky on one of the columns in my grid.
I have a horizontally scrollable table with 4 columns and the first column is sticky.
When I scroll to the right, the first column does stick to the left as is expected.
However, when scrolling starts nearing the end of the table's horizontal space, the first no longer maintains its sticky position to the left edge of the table.
I've noticed that if I remove the HTML markup for the <aside>, the sticky column behavior works as expected. However, I need the <aside> to be present.
Any ideas on how to fix this with CSS while maintaining the DOM structure?
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.container {
display: flex;
width: 300px;
padding: 0.5rem;
border: 1px solid red;
}
aside {
padding-right: 1rem;
width: 100px;
}
.table {
min-width: 0;
overflow: scroll;
}
.row {
display: grid;
grid-template-columns: repeat(4, 100px);
}
.col {
border: 1px solid black;
background: #eee;
}
.sticky {
position: sticky;
left: 0;
z-index: 1;
background: lightblue;
}
<div class="container">
<aside>
My aside
</aside>
<div class="table">
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
</div>
</div>
So the problem actually falls with the min-width set on .table. The width is not defined to the end of the row which is affecting the behavior of the sticky elements at row-end.
You'll notice if you exchange min-width: 0; to min-width: 100%; it functions as you would like, but then the table overflows outside of .container.
A stickily positioned element is treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root.
MDN CSS/Position
So with that said, the elements with the scroll need to have a defined width so the sticky element knows to stay sticky.
A simple solution would be to nest all of the .table elements in another wrapper that has a defined width. I chose 300px based on the rendered width of the content and the container.
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.container {
display: flex;
width: 300px;
padding: 0.5rem;
border: 1px solid red;
}
aside {
padding-right: 1rem;
width: 100px;
}
.table {
min-width: 0;
overflow: scroll;
}
.row {
display: grid;
grid-template-columns: repeat(4, 100px);
}
.col {
border: 1px solid black;
background: #eee;
}
.sticky {
position: sticky;
left: 0;
z-index: 1;
background: lightblue;
}
.wrapper {
width: 300px;
}
<div class="container">
<aside>
My aside
</aside>
<div class="table">
<div class="wrapper">
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
</div>
</div>
</div>
In this example http://jsfiddle.net/rodrigolinkweb/k8qg14xL/ I need to select only "Container 12", how can I do this?
ps: note that both divs have the same class name "wrapper".
.container:nth-child(n+3){
background-color: gray;
color:white;
}
<div class="wrapper">
<div class="container">Container 1</div>
<div class="container">Container 2</div>
<div class="container">Container 3</div>
</div>
<br />
<div class="wrapper">
<div class="container">Container 11</div>
<div class="container">Container 12</div>
<div class="container">Container 13</div>
</div>
You can select them with the .wrapper class, like this
.wrapper:nth-of-type(2) .container:nth-child(2){
background-color: gray;
color:white;
}
<div class="wrapper">
<div class="container">Container 1</div>
<div class="container">Container 2</div>
<div class="container">Container 3</div>
</div>
<br />
<div class="wrapper">
<div class="container">Container 11</div>
<div class="container">Container 12</div>
<div class="container">Container 13</div>
</div>
If you want to select it from backwards you can use :nth-last-of-type() . Refer to the following fiddle here
No matter what content the .wrapper has :nth-child will select child based on its position where as :nth-of-type selects with appropriate attribute.
.wrapper:nth-of-type(2) .container:nth-child(2){
background-color: gray;
color:white;
}
<div class="wrapper">
<div class="container">Container 1</div>
<div class="container">Container 2</div>
<div class="container">Container 3</div>
</div>
<br />
<div class="wrapper">
Some link
<div class="container">Container 12</div>
<div class="container">Container 13</div>
</div>
Here is some of my CSS code which I am using to create shadow boxes inside the grid view. I tried to find HTML something like rowspan and colspan but I did't got any idea.
.box{
width: 100%;
height: 240px;
background: white;
border-color: black;
border-width: 2px;
-webkit-box-shadow: -1px 2px 5px 1px rgba(10,0,10,1);
-moz-box-shadow: -1px 2px 5px 1px rgba(10,0,10,1);
box-shadow: -1px 2px 5px 1px rgba(10,0,10,1);
};
You can create columns with Bootstrap Grid system. You can try following structural.
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="box h-100">Box 1</div>
</div>
<div class="col-sm-4">
<div class="box mb-3">Box 2</div>
<div class="box mb-3">Box 3</div>
<div class="box mb-3">Box 4</div>
<div class="box">Box 5</div>
</div>
</div>
<div class="row my-3">
<div class="col-sm-4">
<div class="box">Box 6</div>
</div>
<div class="col-sm-4">
<div class="box">Box 7</div>
</div>
<div class="col-sm-4">
<div class="box">Box 8</div>
</div>
</div>
<div class="row my-3">
<div class="col-sm-4">
<div class="box">Box 9</div>
</div>
<div class="col-sm-4">
<div class="box">Box 10</div>
</div>
<div class="col-sm-4">
<div class="box">Box 11</div>
</div>
</div>
</div>
I'm trying to implement layout where on desktop screen size we have 2 columns, and one column on mobile/tablets
is it possible to make this code:
<div class="posts-2-col">
<div class="post">Post 1</div>
<div class="post">Post 2</div>
<div class="post">Post 3</div>
<div class="post">Post 4</div>
<div class="post">Post 5</div>
<div class="post">Post 6</div>
</div>
to render like this:
(knowing that height of each post can e different)
I just put the fixed height to image a higher post
Jsfiddle
*{
box-sizing: border-box;
}
.posts-2-col{
width: 300px;
margin: 0 -10px;
}
.posts-2-col .post{
border: 1px solid red;
width: 135px;
margin: 0 5px;
margin-bottom: 10px;
float: left;
}
<div class="posts-2-col">
<div class="post">Post 1</div>
<div class="post">Post 2</div>
<div class="post" style="height: 50px">Post 3</div>
<div class="post">Post 4</div>
<div class="post">Post 5</div>
<div class="post">Post 6</div>
<div class="post">Post 7</div>
</div>
This question already has answers here:
How do I keep CSS floats in one line?
(10 answers)
Closed 9 years ago.
Consider the following fragment:
<html>
<head>
<style type="text/css">
#container {
width: 400px;
height: 600px;
background-color: lightgrey;
}
.item {
width: 50px;
overflow: hidden;
white-space: nowrap;
float: left;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="container">
<div class="item">ITEM 1</div>
<div class="item">ITEM 2</div>
<div class="item">ITEM 3</div>
<div class="item">ITEM 4</div>
<div class="item">ITEM 5</div>
<div class="item">ITEM 6</div>
<div class="item">ITEM 7</div>
<div class="item">ITEM 8</div>
<div class="item">ITEM 9</div>
<div class="item">ITEM 10</div>
<div class="item">ITEM 11</div>
<div class="item">ITEM 12</div>
<div class="item">ITEM 13</div>
<div class="item">ITEM 14</div>
<div class="item">ITEM 15</div>
<div class="item">ITEM 16</div>
</div>
</body>
</html>
It gives me the following result:
What I want is for all the inner boxes to stay on the same line yet the container having the width 400px in case when the inner boxes don't fill it up completely, like this:
I'd really appreciate if someone hinted me on this. Thanks in advance!
You could try working with display:table(-row)(-cell) instead of floating, see my answer to this question: Force <DIV> to stay in one line with scroll bar
Important remark, however, is that this won't work in IE7...
You can do a white-space: nowrap on the elements in the container that you don't want to wrap.
Demo here http://www.w3schools.com/cssref/pr_text_white-space.asp