I have two divs side by side. I\'d like the height of them to be the same, and stay the same if one of them resizes. I can\'t figure this one out though. Ideas?
To c
You could use Faux Columns.
Basically it uses a background image in a containing DIV to simulate the two equal-height-DIVs. Using this technique also allowes you to add shadows, rounded corners, custom borders or other funky patterns to your containers.
Only works with fixed-width boxes though.
Well tested out and properly working in every browser.
The modern way of doing this (which also avoids having to declare a <div class="row"></div>
-wrapper around every two items) would be to make use of a CSS grid. This also gives you easy control on the gaps between your item rows/columns.
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* or simply "1fr 1fr;" */
grid-row-gap: 10px;
grid-column-gap: 10px;
}
.grid-item {
background-color: #f8f8f8;
box-shadow: 0 0 3px #666;
text-align: center;
}
.grid-item img {
max-width: 100%;
}
<div class="grid-container">
<div class="grid-item">1 <br />1.1<br />1.1.1</div>
<div class="grid-item">2</div>
<div class="grid-item">3
<img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
3.1
</div>
<div class="grid-item">4</div>
<div class="grid-item">5 <br />1.1<br />1.1.1</div>
<div class="grid-item">6<img src="https://lorempixel.com/400/300/abstract/" alt="" />
6.1</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9 <br />1.1<br />1.1.1</div>
<div class="grid-item">10</div>
<div class="grid-item">11
<img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
11.1
</div>
<div class="grid-item">12</div>
</div>
The Fiddle
HTML
<div class="container">
<div class="left-column">
</div>
<div class="right-column">
<h1>Hello Kitty!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
</div>
</div>
CSS
.container {
float: left;
width: 100%;
background-color: black;
position: relative;
left: 0;
}
.container:before,
.container:after {
content: " ";
display: table;
}
.container:after {
clear: both;
}
.left-column {
float: left;
width: 30%;
height: 100%;
position: absolute;
background: wheat;
}
.right-column {
float: right;
width: 70%;
position: relative;
padding: 0;
margin: 0;
background: rebeccapurple;
}
I'm surprised that nobody has mentioned the (very old but reliable) Absolute Columns technique: http://24ways.org/2008/absolute-columns/
In my opinion, it is far superior to both Faux Columns and One True Layout's technique.
The general idea is that an element with position: absolute;
will position against the nearest parent element that has position: relative;
. You then stretch a column to fill 100% height by assigning both a top: 0px;
and bottom: 0px;
(or whatever pixels/percentages you actually need.) Here's an example:
<!DOCTYPE html>
<html>
<head>
<style>
#container
{
position: relative;
}
#left-column
{
width: 50%;
background-color: pink;
}
#right-column
{
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width: 50%;
background-color: teal;
}
</style>
</head>
<body>
<div id="container">
<div id="left-column">
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
</div>
<div id="right-column">
Lorem ipsum
</div>
</div>
</body>
</html>
I was having the same problem so i created this small function using jquery as jquery is part of every web application nowadays.
function fEqualizeHeight(sSelector) {
var sObjects = $(sSelector);
var iCount = sObjects.length;
var iHeights = [];
if (iCount > 0) {
$(sObjects).each(function () {
var sHeight = $(this).css('height');
var iHeight = parseInt(sHeight.replace(/px/i,''));
iHeights.push(iHeight);
});
iHeights.sort(function (a, b) {
return a - b
});
var iMaxHeight = iHeights.pop();
$(sSelector).each(function () {
$(this).css({
'height': iMaxHeight + 'px'
});
});
}
}
You can call this function on page ready event
$(document).ready(function(){
fEqualizeHeight('.columns');
});
I hope this works for you.
Using jQuery, you can do it in a super simple one-line-script.
// HTML
<div id="columnOne">
</div>
<div id="columnTwo">
</div>
// Javascript
$("#columnTwo").height($("#columnOne").height());
This is a bit more interesting. The technique is called Faux Columns. More or less you don't actually set the actual height to be the same, but you rig up some graphical elements so they look the same height.