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>
Related
I am building a Gantt chart using CSS. I calculate the 'offset' of a task from the first date in the header, and the width of the task based on the duration as a percentage of the total range between the dates in the header - see example. This largely works fine except for when there are too many months in the header, and so the overflow starts to scroll, because the percentage of the offset & width are applied to the container width excluding the scrollable portion. How can I fix this so the these values are applied to the actual scrollable width of the container? (Hopefully without using any JS)
In the example, the task should start at 50% (i.e. start of month 7) and run for 25% (i.e. to end of month 9). You can check this by removing the min-width:300px;
(Note that the red background will ultimately be transparent)
.container {
overflow-x: auto;
width:100%;
background-color:#eee;
}
.container .months {
display:flex;
flex-direction:row;
}
.container .months .month {
min-width:300px;
padding:5px 10px;
border:solid 1px black;
flex: 1 0 0%;
}
.container .bars .bar {
display:flex;
flex-direction:row;
}
.container .bars .bar .spacer {
background-color:red;
}
.container .bars .bar .task {
background-color:yellow;
}
<div class="container">
<div class="months">
<div class="month">Month 1</div>
<div class="month">Month 2</div>
<div class="month">Month 3</div>
<div class="month">Month 4</div>
<div class="month">Month 5</div>
<div class="month">Month 6</div>
<div class="month">Month 7</div>
<div class="month">Month 8</div>
<div class="month">Month 9</div>
<div class="month">Month 10</div>
<div class="month">Month 11</div>
<div class="month">Month 12</div>
</div>
<div class="bars">
<div class="bar">
<span class="spacer" style="width:50%"></span>
<span class="task" style="width:25%">Task 1</span>
</div>
</div>
</div>
display: grid on the container will fix the issue. The bars will be inside a track that has the same size as the months element
.container {
overflow-x: auto;
display: grid;
background-color:#eee;
}
.container .months {
display:flex;
flex-direction:row;
}
.container .months .month {
min-width:300px;
padding:5px 10px;
border:solid 1px black;
flex: 1 0 0%;
}
.container .bars .bar {
display:flex;
flex-direction:row;
}
.container .bars .bar .spacer {
background-color:red;
}
.container .bars .bar .task {
background-color:yellow;
}
<div class="container">
<div class="months">
<div class="month">Month 1</div>
<div class="month">Month 2</div>
<div class="month">Month 3</div>
<div class="month">Month 4</div>
<div class="month">Month 5</div>
<div class="month">Month 6</div>
<div class="month">Month 7</div>
<div class="month">Month 8</div>
<div class="month">Month 9</div>
<div class="month">Month 10</div>
<div class="month">Month 11</div>
<div class="month">Month 12</div>
</div>
<div class="bars">
<div class="bar">
<span class="spacer" style="width:50%"></span>
<span class="task" style="width:25%">Task 1</span>
</div>
</div>
</div>
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>
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>
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%;
}
Let's assume the following situation:
Code for this situation:
<html>
<head>
<style>
.box {
border-style: solid;
border-width: 1px;
width: 700px;
height: 300px;
padding: 3px;
}
.element {
border-style: solid;
border-width: 0px;
width: 25%;
height: 20px;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="element">element 1</div>
<div class="element">element 2</div>
<div class="element">element 3</div>
<div class="element">element 4</div>
<div class="element">element 5</div>
<div class="element">element 6</div>
<div class="element">element 7</div>
<div class="element">element 8</div>
<div class="element">element 9</div>
<div class="element">element 10</div>
</div>
</body>
</html>
width set to 50% - 2 columns
width set to 33% - 3 columns
and the question is: how to count number of columns using Selenium except reading width value :)
Page is written in RWD and number of columns will depend on width of page for given device