I am working on an application that generates dynamic content and displays them on floating divs. Each div takes 49% width of the page. The problem I'm running into is that the height of the divs vary depending on the content.
What I'm looking to do is make the divs on the same row the same height. Any suggestions?
.item {
background: #c4c4c4;
width: 49%;
border: 1px solid black;
float: left;
}
<div id="container">
<div class="item">
Test
</div>
<div class="item">
Hello.
Sample <br>
Content <br>
</div>
<div class="item">
Test<br>
Sample Content
</div>
<div class="item">
Test
</div>
</div>
Using CSS3 flexbox to make the #container adapt flexible box layout.
Default value of flex-wrap is nowrap so it aligns in a single row. Use flex-wrap: wrap to create multiple rows based on item's width.
Current browser support for Flexbox is pretty good: Can I use Flexbox?
#container {
display: flex;
flex-wrap: wrap; /* Wrap after the items fill the row */
/* Safari specific rules */
display: -webkit-flex;
-webkit-flex-wrap: wrap;
}
.item {
background: #c4c4c4;
border: 1px solid black;
width: 49%;
}
<div id="container">
<div class="item">
Test
</div>
<div class="item">
Hello. Sample
<br>Content
<br>
</div>
<div class="item">
Test
<br>Sample Content
</div>
<div class="item">
Test
</div>
</div>
Use display: table on the containing div, and display: block on your "table cell" divs.
Another answer involves using the display: table property in CSS. It is similar to table scaffolding, but allows much more flexibility with CSS and has more browser support than flexbox.
HTML:
<div id="container">
<div class="row">
<div class="item">
Test
</div>
<div class="item">
Hello.
Sample <br>
Content <br>
</div>
</div>
<div class="row">
<div class="item">
Test<br>
Sample Content
</div>
<div class="item">
Test
</div>
</div>
</div>
CSS:
#container {
width: 100%;
display: table;
}
.row {
display: table-row;
}
.item {
background: #c4c4c4;
width: 49%;
box-sizing: border-box;
border: 1px solid black;
display: table-cell;
}
Fiddle:
http://jsfiddle.net/q5jyfuy6/
You can add like height:40px; in your .item class to make height of the divs independent of the content.
.item {
background: #c4c4c4;
width: 49%;
border: 1px solid black;
float: left;
height:40px;
}
Related
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 have some div boxes in my html and they are formatted the way I want.
Whenever I use JavaScript to change the value of one of the boxes it changes the formatting.
Why is that? And how do I prevent it from doing that?
document.getElementById("0").innerHTML = 20;
body {
background-color: red;
width: 1000px;
margin: 10px;
}
#top {
display: block;
width: 200px;
height: 100px;
}
#bottom {
display: block;
width: 200px;
height: 100px;
}
.box {
height: 94px;
width: 96px;
border: 1px solid white;
display: inline-block;
}
<div id="board">
<div class="row" id="top">
<div class="box" id="0"></div>
<div class="box" id="1"></div>
</div>
<div class="row" id="bottom">
<div class="box" id="2"></div>
<div class="box" id="3"></div>
</div>
</div>
Here is my JSFiddle:
https://jsfiddle.net/pb4759jh68/arbsws5u/
In my fiddle I have my JavaScript statement active, you can comment it out to see what it does to my formatting.
Thanks!!!
It's actually not the JS, but due to the content being added. They align at first because there's no content, but once you add in content, it tries to line up the text with the bottom of the next block. You can avoid this by setting:
vertical-align:top;
to the box class.
I have a bunch of boxes in a container. I don't know how many boxes fit onto a row, the bigger your screen is the more boxes there should be. However I want each row to be fully filled and the boxes resized (within 100px to 150px) to ensure that each row is filled.
http://jsfiddle.net/ssxu5moy/11/
.container2 {
width:100%;
height: 100px;
display: flex;
flex-wrap: wrap;
align-items: stretch;
align-content: stretch;
}
.box {
border: 1px solid purple;
background: blue;
align-self: stretch;
min-width: 100px;
max-width: 150px;
}
<div class="container2">
<div class="box box1">
</div>
<div class="box box2">
</div>
<div class="box box3">
</div>
<div class="box box3">
</div>
<div class="box box3">
</div>
<div class="box box3">
</div>
<div class="box box3">
</div>
<div class="box box3">
</div>
<div class="box box3">
</div>
</div>
I already did this in javascript and it works fine, but I thought about changing to flexbox to be simpler, but I'm having difficulty getting it working. Is this even possible in flexbox?
Yeah! You can do that. The max-width is making the boxes stop at 150px which appears not what you want as you want each box to fill the remaining space in the row after the wrap right?
Here's an updated fiddle:
http://jsfiddle.net/disinfor/ssxu5moy/12/
The only thing I changed in your CSS was the min-width and max-width to the flex property:
CSS:
.box {
border: 1px solid purple;
background: blue;
align-self: stretch;
flex:1 0 100px;
}
If I understood your question, this should be what you're looking for. Caveat: flex property needs browser prefix.
EDIT: here's some light reading on the flex property shorthand:
https://css-tricks.com/almanac/properties/f/flex/
In the event the link is gone:
This is the shorthand for flex-grow, flex-shrink and flex-basis (respectively).
I am looking for some responsive equal height div by just using CSS. I don't want to specify the height. Looking somewhat similar to the image below but both the divs should adjust based on the other div height.
If the left side div is long then the right side div should adjust to the left side div and vice versa.
Also the right side div has 2 small divs which should also be of same height.
Can this be achieved using only CSS? Or should I make use of JS/jQuery?
Example here on the jsFiddle
img {
width: 100%;
border: 1px solid green;
}
.row {
display: table;
}
.column {
display: table-cell;
vertical-align: top;
}
.w100 {
width: 100%;
}
.w75 {
width: 75%;
}
.w50 {
width: 50%;
}
.w25 {
width: 25%;
}
<body>
<div class="row w100">
<div class="column w75">
<img src="http://placehold.it/500x500" alt="">
</div>
<div class="column w25">
<div class="col-row">
<img src="http://placehold.it/250x250" alt="">
</div>
<div class="col-row">
<img src="http://placehold.it/250x250" alt="">
</div>
</div>
</div>
You could use flex-box, for example:
.row {
display: flex;
flex-direction:row;
}
.column {
display: flex;
flex-direction:column;
}
And getting rid of the widths the browser does a great job aligning the items:
http://jsfiddle.net/2vLpx9k3/3/
You may need some prefixes for cross-browser support.
I've made something that might possibly be something that you are looking for.
http://jsfiddle.net/2vLpx9k3/4/
It adjusts the widht and height of the inner elements based on the outer element.
HTML:
<div class="outer">
<div class="left">
<div class="right"></div>
<div class="right bottom"></div>
</div>
</div>
CSS:
.outer {
height: 100vh;
}
.left {
background-color: red;
width: 100%;
height: 100%;
margin-right: 50%;
}
.right {
background-color: green;
height: 50%;
margin-left: 50%;
}
.right.bottom {
background-color: black;
}