How can I ensure that two divs placed side by side will always have the same height, even when one of them changes based on content, using only CSS?
I created a fiddle to demonstrate. I want both the red and blue divs to have equal heights...
Below is the CSS code:
#wrapper {
width: 300px;
}
#left {
width: 50px;
background: blue;
float: left;
height: 100%; /* unfortunately, this does not work... */
}
#right {
width: 250px;
background: red;
float: left;
}
If you're looking for an alternative to using float, consider implementing display: table-cell instead. Keep in mind that some older browsers may not support this property. Take a look at the example code snippet below:
#wrapper {
display: table; // Check out FelipeAls' comment below
width: 300px;
}
#left {
display: table-cell;
width: 50px;
background: blue;
}
#right {
display: table-cell;
width: 250px;
background: red;
}
Antony's solution is effective, however, for all the divs to have the same parent and a wrapper, a different approach using JavaScript can be utilized. This solution works with any type of element as long as they share the same selector.
function setEqualHeight(selector, triggerContinuously) {
var elements = $(selector)
elements.css("height", "auto")
var max = Number.NEGATIVE_INFINITY;
$.each(elements, function(index, item) {
if ($(item).height() > max) {
max = $(item).height()
}
})
$(selector).css("height", max + "px")
if (!!triggerContinuous) {
$(document).on("input", selector, function() {
setEqualHeight(selector, false)
})
$(window).resize(function() {
setEqualHeight(selector, false)
})
}
}
setEqualHeight(".sameh", true)
For those looking to achieve the same goal, I suggest checking out this informative article on how to accomplish it. I would share a demo, but it involves quite a bit of CSS styling. Check out the article here
A more streamlined approach that I would like to highlight involves utilizing a sizable padding-bottom: 500em along with a corresponding negative margin-bottom:-500em on columns, while the wrapper simply employs overflow:hidden to truncate the columns accordingly.
Referenced source: HTML/CSS: Achieving equal height for two floating divs
To achieve the desired layout, Hexodus suggests using padding-bottom and margin-bottom, but a more efficient solution would involve utilizing flexbox or grid.
If you're curious, you can explore this codepen example I created. I added a footer component which required a bit of tweaking to accomplish.
https://i.sstatic.net/ZwGYn.png
.section {
width: 500px;
margin: auto;
overflow: hidden;
padding: 0;
}
div {
padding: 1rem;
}
.header {
background: lightblue;
}
.sidebar {
background: lightgreen;
width: calc(25% - 1rem);
}
.sidebar-left {
float: left;
padding-bottom: 500rem;
margin-bottom: -500rem;
}
.main {
background: pink;
width: calc(50% - 4rem);
float: left;
padding-bottom: 500rem;
margin-bottom: -500rem;
}
.sidebar-right {
float: right;
padding-bottom: 500rem;
margin-bottom: -500rem;
}
.footer {
background: black;
color: white;
float: left;
clear: both;
margin-top: 1rem;
width: calc(100% - 2rem);
}<div class="section">
<div class="header">
This is the header
</div>
<div class="sidebar sidebar-left">
This sidebar could have a menu or something like that. It may not have the same length as the other
</div>
<div class="main">
This is the main area. It should have the same length as the sidebars
</div>
<div class="sidebar sidebar-right">
This is the other sidebar, it could have some ads
</div>
<div class="footer">
Footer area
</div>
</div>By avoiding the use of tables, you can achieve the desired layout with a clever CSS technique like this one.
For reference, check out this example - http://jsfiddle.net/LMGsv/
HTML
<div id="wrapper">
<div id="columns">
<div id="left">text</div>
<div id="right">text<br/>another line<br /></div>
</div>
</div>
CSS
#wrapper {
float:left;
width: 300px;
}
#columns {
float:left;
width:300px;
background:blue;
}
#left {
float:left;
width:50px;
background: blue;
}
#right {
width:250px;
background: red;
float:left
}
Displaying a table with two cells positioned next to each other: <table> <td disabled>Content for the first cell</td> <td style="margin-left:100px;" disabled>Content for the second cell</td> </table> Despite us ...
Are there any pre-existing Twitter Bootstrap classes that can be used for styling font weight, such as font-weight: bold and other variations? I'd prefer not to reinvent the wheel if Bootstrap already has this capability. ...
How to call a RESTful webservice in Java using HTML Ajax? I have created a simple webservice in Java and want to POST data into a database using HTML Ajax by calling a Java webservice in Eclipse. However, I encountered an error in my Java program. How can ...
Currently, I am using Ionic and HTML to implement a vertical line within an ion-item in an ion-list. The desired outcome is to have something similar to this (the colored line after 'all-day'): I attempted the following approach: <ion-list&g ...
I am looking to design a grid of checkboxes that are displayed in columns, with 5 checkboxes in each column. <ul class="checkbox-grid"> <li><input type="checkbox" name="text1" value="value1" /><label for="text1">Text 1</lab ...
I am looking to enhance the functionality of my left menu buttons by adding a navigation path to each one (excluding the main menu). The menu items' names are received as @Input. I have set up a dictionary mapping all the items' names to their r ...
Is it feasible to dynamically color each table row based on the input in a designated column for that row? For example: B1 = 1 // Red row B2 = 1 // Red row B3 = 3 // Blue row B4 = 2 // Green row B5 = 1 // Red row And so forth? The datatable wi ...
Everything seems to be in order: background-image: url(./dir/img.jpg); However, I encounter a 404 error when attempting to reference an image using this approach: index.html <div style="--url: url(./dir/img.jpg);"></div> css backg ...
I am currently working on wrapping grid element divs into Angular components in order to streamline the input process and establish a standard: <bootstrap-row> <bootstrap-input-text col=6 ng-model="$ctrl.model" label="hey!"& ...
Is there a way to prevent layout issues when using CSS to dynamically display items? For example, when hiding button A it causes the Edit button to shift to the left instead of sticking to the right edge of the grid as expected. <html> <body> ...
I am facing an issue with a popup on my website. I have a separate page called math.ejs that pops up when a button is pressed on the index.ejs page. However, after clicking the submit Ok button in the math.ejs popup, I want it to close and display the calc ...
I need assistance with a form that involves 2 radio buttons. When one radio button is selected, I want to display 3 text boxes and hide them when the other radio button is chosen. Below is the code snippet: These are the 2 radio buttons: <input type= ...
Within my Vue3 Quasar application, I have implemented a component structure similar to the following: <template> <div class="q-pa-md"> <div id="myCustomLabel">{{ props.label }}</div> <q-input r ...
Adding microdata to a page can be challenging when the data for an item is spread across different parts of the page. If there are two span elements with an itemscope attribute, it would be beneficial if search engines could merge these two itemscopes into ...
Struggling to center a photo library on my webpage is really frustrating me. Does anyone have any tips? I've experimented with different ways to center it in the code, but nothing seems to do the trick :/ HTML: <div style="display: inline-block; ...
Is there a way to prompt the user with a confirmation box before exiting a page using JavaScript? If the user clicks "OK", a function should be executed before leaving the page, and if they click "Cancel", the page should remain open. window.onbeforeunloa ...
I am currently working on creating a functionality similar to the 'Sortable Widget', but due to some constraints, I cannot use the premade widget. Instead, I am trying to replicate its features using draggable and droppable elements: $(".Element ...
I'm in the process of developing a user-friendly dashboard that incorporates Bootstrap 5.3.1's nested nav feature. However, I've encountered a problem where the navigation disappears when there is too much content on the page. To address thi ...
I have been attempting to scrape a travel website using Selenium Webdriver and Python. While I have successfully set the destination (destino) and place of origin (origem), I am encountering difficulties when trying to select a date. I understand that Ja ...
How can I ensure the button is always positioned at the center bottom of the page, regardless of the content height? This is a snippet from my code: const useStyles = makeStyles({ button: { bottom: 0, right: 0, position: "absolute" ...