Please run this demo:
.app {
background:pink;
width: 90vw;
overflow: hidden;
}
.app__item {
background: lightblue;
width: 200px;
float :left;
margin:5px;
height: 40px;
}
.app__item:last-child {
float: right;
}
.app__item--size2 {
height: 90px;
}
<div class="app">
<div class="app__item app__item--size2">1</div>
<div class="app__item">2</div>
<div class="app__item">3</div>
<div class="app__item">4</div>
<div class="app__item">5</div>
<div class="app__item">6</div>
<div class="app__item">7</div>
<div class="app__item">8</div>
<div class="app__item">9</div>
<div class="app__item">10</div>
<div class="app__item">
<button>search</button>
</div>
</div>
Please notice the red color text which is what I want:
How to Let Float Items Split the Blank Area in Average?
This gif point out what I want and also the reason why I am using float layout.
If using flex, the result would be
.app {
background:pink;
width: 80vw;
display: flex;
flex-flow: row wrap;
}
.app__item,
.app__item_wrapper {
margin:5px;
width: 200px;
flex: 0 0 auto;
}
.app__item {
background: lightblue;
height: 40px;
}
.app__item_wrapper {
display: flex;
flex-flow: column;
justify-content: space-between;
}
.app__item--size2 {
height: 90px;
}
.app__item--inner {
margin:0;
flex: 0 0 auto;
}
<div class="app">
<div class="app__item app__item--size2">1</div>
<div class=" app__item_wrapper app__item--size2">
<div class="app__item app__item--inner">2</div>
<div class="app__item app__item--inner">3</div>
</div>
<div class=" app__item_wrapper app__item--size2">
<div class="app__item app__item--inner">4</div>
<div class="app__item app__item--inner">5</div>
</div>
<div class="app__item">6</div>
<div class="app__item">7</div>
<div class="app__item">8</div>
<div class="app__item">
<button>search</button>
</div>
</div>
And the con is that it won't work well when viewport is changing. See this:
and this is the con:
If I understand correctly, you're wanting the cells to the right of "cell 1" to stretch-to-fill the reaming horizontal space of the enclosing div (with pink background).
You could use CSS Grid to achieve this as shown below:
.app {
background:pink;
width: 90vw;
padding:5px;
display:grid;
/* Cause first column with to be 200px, remaining two columns
to scale to fit remaining width */
grid-template-columns: 200px repeat(2, 1fr);
/* Set spacing between cells */
grid-gap:10px;
}
.app__item {
background: lightblue;
width: 100%;
height: 40px;
}
.app__item--size2 {
/* Cause top left cell to occupy two rows */
grid-row: 1 / 3;
height:100%;
}
<div class="app">
<div class="app__item app__item--size2">1</div>
<div class="app__item">2</div>
<div class="app__item">3</div>
<div class="app__item">4</div>
<div class="app__item">5</div>
<div class="app__item">6</div>
<div class="app__item">7</div>
<div class="app__item">8</div>
<div class="app__item">9</div>
<div class="app__item">10</div>
<div class="app__item">
<button>search</button>
</div>
</div>
Thank #Dacre Denny for giving me inspiration. Finally, I got it.
.app {
background:pink;
width: 90vw;
padding:5px;
display:grid;
grid-template-columns: repeat(auto-fit,200px);
justify-content:space-evenly;
grid-gap: 5px;
}
.app__item {
background: lightblue;
width: 200px;
height: 40px;
}
.app__item--size2 {
/* Cause top left cell to occupy two rows */
grid-row: 1 / 3;
height:100%;
}
.app__item:last-child {
grid-column-end: -1
}
<div class="app">
<div class="app__item app__item--size2">1</div>
<div class="app__item">2</div>
<div class="app__item">3</div>
<div class="app__item">4</div>
<div class="app__item">5</div>
<div class="app__item">6</div>
<div class="app__item">7</div>
<div class="app__item">8</div>
<div class="app__item">9</div>
<div class="app__item">10</div>
<div class="app__item">
<button>search</button>
</div>
</div>
See this gif when viewport is changing.
Related
Is there any way to get a behaviour similar to this shown on drawing?
I mean of course manually we can specify grid-row: span x, but grid-row: span auto seems doesn't work. I need all grid items to be the same size, but when one item has to resize (due to text overflow) i need to set the grid-row: span 2, and when it's getting bigger - respectively higher number.
To acheive something like this I need to write .js or can it be done with css only?
Here is code sandbox
let items = document.querySelectorAll('.item')
items.forEach(item => {
if(item.scrollHeight>item.clientHeight){
let itemSpan = Math.round(item.scrollHeight/40) + 1 // (height = 30) + (gap = 10) 40 =>
item.style.cssText = `--n : ${itemSpan}`
}
})
.container {
width: 200px;
margin: 15vw auto;
}
.grid {
width: 100%;
background-color: chartreuse;
display: grid;
justify-items: center;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 30px;
grid-auto-flow: row;
grid-gap: 10px;
word-break: break-all;
}
.item {
background-color: gold;
min-height: 30px;
width: 50px;
padding: 5px;
grid-row: auto / span var(--n); /* var(--n) is calculated with js */
box-sizing: border-box;
}
<div class="container">
<div class="grid">
<div class="item">1</div>
<div class="item ">2 Lorem ipsum dolor sit amet consectetur adipisicing </div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5 t amet consectetur adipisi</div>
<div class="item">6 lorem</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9 t amet consectetur adipisi </div>
</div>
</div>
Sometimes good to review the fundamentals:
HTML is for structure.
CSS is for presentation.
JavaScript is for behavior.
Your problem falls within 3 ("item has to resize (due to text overflow)")
You can add min-height to ".item" class to set same size of grid items.
.item{
min-height:100px;
}
.App {
font-family: sans-serif;
text-align: center;
}
.container {
width: 200px;
height: 200px;
}
.grid {
width: 100%;
background-color: chartreuse;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
grid-auto-flow: dense;
}
.item {
background-color: brown;
height: 30px;
min-height:100px;
}
.large {
height: fit-content;
word-break: break-all;
grid-row: span auto;
}
<div class="App">
<div class="container">
<div class="grid">
<div class="item"> </div>
<div class="item large">
asdasdasdasdasdsadasdasdasdasdasdasd{" "}
</div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
</div>
</div>
This question already has answers here:
How to disable equal height columns in Flexbox?
(4 answers)
Closed 1 year ago.
I have 2 divs both with the same class and when I add content to one the height of the other also changes.
function addContent() {
document.getElementsByClassName('list')[1].innerHTML += "<h1>test</h1>"
}
.container {
width: 79%;
margin: 0 auto;
}
.bansContainer {
display: flex;
margin: 25px 0;
overflow: auto;
justify-content: space-between;
}
.list {
background-color: #436935;
}
<div class="container">
<div class="bansContainer">
<div class="list">
<h1>
left
</h1>
</div>
<div>
<h1 class="list">
right
</h1>
<button onclick=addContent()>Click</button>
</div>
</div>
</div>
How can I change/update it in a way that only the height of the div with content being added changes?
function addContent() {
document.getElementsByClassName('list')[1].innerHTML += "<h1>test</h1>"
}
.container {
width: 79%;
margin: 0 auto;
}
.bansContainer {
display: flex;
margin: 25px 0;
overflow: auto;
justify-content: space-between;
}
.list {
background-color: #436935;
align-self: flex-start;
}
<div class="container">
<div class="bansContainer">
<div class="list">
<h1>
left
</h1>
</div>
<div>
<h1 class="list">
right
</h1>
<button onclick=addContent()>Click</button>
</div>
</div>
</div>
It is because you haven't specified height on the first column and it's continuing to adapt the height of its parent div aka bansContainer. So here are two approaches. One is you add align-self: flex-start; or you specify a height on the column.
function addContent() {
document.getElementsByClassName('list')[1].innerHTML += "<h1>test</h1>"
}
.container {
width: 79%;
margin: 0 auto;
}
.bansContainer {
display: flex;
margin: 25px 0;
overflow: auto;
justify-content: space-between;
}
.list {
background-color: #436935;
/*align-self: flex-start;*/
}
.n-h {
height: fit-content;
}
<div class="container">
<div class="bansContainer">
<div class="list n-h">
<h1>
left
</h1>
</div>
<div>
<h1 class="list">
right
</h1>
<button onclick=addContent()>Click</button>
</div>
</div>
</div>
I am trying to write a code is CSS and normal javascript but it won't work. Here is my code (HTML and CSS).
.wrapper{
height: 100%;
margin: 1.5rem 0 0 0;
display: flex;
}
.first{
vertical-align: top;
display: inline-block;
margin-right: 2rem;
flex: 1;
}
.second{
vertical-align:top;
display: inline-block;
flex: 1;
}
<div class="wrapper">
<div class="first">
<div class="times">
<div><h1>TIMES</h1><br></div>
<div class="space">
<h2>TIMES</h2>
<p>GESLOTEN</p>
</div>
<div class="space">
<h2>Dinsdag - Zaterdag</h2>
<p>09:30 UUR - 18:00 UUR</p>
</div>
</div>
</div>
<div class="second">
<div class="welcome">
<div><h1>WELKOM</h1></div>
<div><p>TEKST</p></div>
</div>
</div>
</div>
I have tried everything, at least I think I have.
The problem is that I can't fix this in CSS but I tried Java.
Still no success. Can someone please explain why I can't get it the same height.
It's a school project and I need to make a website from scratch.
Here is my full website source code: https://codepen.io/crosso_7/pen/VERrvQ
Both first and second divs are actually the same height - I just copied your snippet and applied a border around each div to see the issue and both divs are equal.
.wrapper{
height: 100%;
margin: 1.5rem 0 0 0;
display: flex;
}
.first{
vertical-align: top;
display: inline-block;
margin-right: 2rem;
flex: 1;
border: solid 1px blue;
}
.second{
vertical-align:top;
display: inline-block;
flex: 1;
border: solid 1px red;
}
<div class="wrapper">
<div class="first">
<div class="times">
<div><h1>TIMES</h1><br></div>
<div class="space">
<h2>TIMES</h2>
<p>GESLOTEN</p>
</div>
<div class="space">
<h2>Dinsdag - Zaterdag</h2>
<p>09:30 UUR - 18:00 UUR</p>
</div>
</div>
</div>
<div class="second">
<div class="welcome">
<div><h1>WELKOM</h1></div>
<div><p>TEKST</p></div>
</div>
</div>
</div>
You can do it using flexbox. Something like this code snippet.
.wrapper {
display: flex;
justify-content: space-between;
}
.wrapper div {
background: #000;
color: #fff;
flex: 1;
margin: 10px;
justify-content: center;
}
<div class='wrapper'>
<div>
<h1>1</h1>
<h2>asasasa</h2>
</div>
<div>2</div>
</div>
Is the first div the one thats higher? It's probably created by the padding from first div content vs seconds less content.
May have to set first and second div with a px or % height which are the same to make it equal.
Try using the code below in your .first and .second divs
flex: 1;
display: flex;
I have these 3 container divs and inside it textdiv is floated left and image div is floated right. I want to set the height of the image as per the height of the text. Is there anyway to do this using jQuery? Or should I give different class names to each div and set the height?
<div class='containerr'>
<div class='textdiv'></div>
<div class='imagediv'></div>
</div>
<div class='containerr'>
<div class='textdiv'></div>
<div class='imagediv'></div>
</div>
<div class='containerr'>
<div class='textdiv'></div>
<div class='imagediv'></div>
</div>
try using this snippet
$('.containerr').each(function(){
$this = $(this);
var textHeight = $this.find(".textdiv");
var imageHeight = textHeight.height();
$(".imagediv").css("height", imageHeight);
});
CSS3 Flexbox can help with difficult layout challenges that were once difficult or impossible with floats alone:
.container {
display: flex;
flex-wrap: wrap;
}
.textdiv, .imagediv {
display: flex;
}
HTML
<div class="containerr">
<div class="textdiv"><p>Smapmle text.</p></div>
<div class="imagediv"></div>
</div>
<div class="containerr">
<div class="textdiv"><p>Smapmle text.</p><p>Smapmle text.</p></div>
<div class="imagediv"></div>
</div>
<div class="containerr">
<div class="textdiv"><p>Smapmle text.</p></div>
<div class="imagediv"></div>
</div>
CSS
.containerr {
display:block;
width:100%;
border: 1px solid black;
position: relative;
}
.textdiv {
display: inline-block;
width: 50%;
border-right: 1px solid blue;
}
.imagediv {
position: absolute;
display:block;
right:0;
top:0;
width: 50%;
height: 100%;
background-color:red;
}
I am not very good with CSS, so I am posting my problem here hoping for a solution:
What I need is following:
I need an HTML row/div/line that shows a date and after the date it shows a bar which will be a percentage of the remaining screen width.
Like so:
2015-11-17 ---------------------(50%)
2015-11-18 ------------------------------------------- (80%)
2015-11-19 ==================================================== (100%)
If you will please consider in the dashes as a proper bar (like 10px height for e.g.). You might notice that 50% and 80% have ---- while 100% has ====.
This is because for any percentage less than 100 I want the bar to be a mixed color like blue and white combo. For the 100% it will be a solid blue color bar.
I am trying to achieve this using HTML/CSS only, but I find my expertise to be lacking.
So far, I have following HTML/CSS:
<div style="padding-top: 10px;padding-bottom:10px; width:100%">
<div style='float:left'><strong>Date </strong>{{Today.date}}</div>
<div style='float:left;background-color:red;width:100%'></div>
</div>
The above code does not even show the second div with red background :(
Any pointers in helping me solve this is very much appreciated!
Flexbox could help here depending on your browser support requirements.
.wrap {
width: 80%;
margin: 1rem auto;
font-size: 24px;
display: flex;
align-items: center;
border: 1px solid grey;
}
.date {
padding: 0 1em;
}
.bar {
height: 10px;
background: #f00;
}
.bar-50 {
flex: .5;
}
.bar-80 {
flex: .8;
}
.bar-100 {
flex: 1;
}
<div class="wrap">
<div class="date">2015-11-17</div>
<div class="bar bar-50"></div>
</div>
<div class="wrap">
<div class="date">2015-11-18</div>
<div class="bar bar-80"></div>
</div>
<div class="wrap">
<div class="date">2015-11-19</div>
<div class="bar bar-100"></div>
</div>
Sneaky version with pseudo-element instead of extra HTML
.bar {
width: 80%;
margin: 1rem auto;
font-size: 24px;
display: flex;
align-items: center;
border: 1px solid grey;
}
.date {
padding: 0 1em;
}
.bar::after {
content: '';
height: 10px;
background: #f00;
}
.bar-50:after {
flex: .5;
}
.bar-80:after {
flex: .8;
}
.bar-100:after {
flex: 1;
}
<div class="bar bar-50">
<div class="date">2015-11-17</div>
</div>
<div class="bar bar-80">
<div class="date">2015-11-18</div>
</div>
<div class="bar bar-100">
<div class="date">2015-11-19</div>
</div>
Perhaps more semantically, use a progress element and a label.
Progess Element # MDN
div {
margin: 10px;
}
<div>
<label for="alpha">2015-11-17</label>
<progress id="alpha" value="50" max="100">50 %</progress>
</div>
<div>
<label for="beta">2015-11-18</label>
<progress id="beta" value="70" max="100">70 %</progress>
</div>
<div>
<label for="gamma">2015-11-19</label>
<progress id="gamma" value="100" max="100">70 %</progress>
</div>
You can try this
<div style="padding-top: 10px;padding-bottom:10px; width:100%;position: relative;">
<div style="float: left;width: 50%;display: inline-block;"><strong>Date </strong>{{Today.date}}</div>
<div style="float:left;width: 50%;height: 10px;display: inline-block;">
<div class="progress" style="background-color:red;width: 100%;height: 100%;">
</div></div>
</div>