The height will be fully dependent on the height of the sibling element

I am trying to make the element cnt-right be the same height as its sibling using only CSS.

This element does not have a parent, only siblings.

Is it possible to achieve this with CSS alone or will I need to use JavaScript?

You can view my structure in this jsFiddle link

.column {
  display: block;
  min-height: 50px;
  background-color: #ccc;  
  text-align: center;
  float: left;
}

.decktop-12 {
  width: 100%;
}

.decktop-8 {
  width: 66%;
}

.decktop-4 {
  width: 33%;
}

.cnt {
  background-color: #995595;
}

.cnt-right {
  background-color: #559959;
}
<div class="mobile-12 decktop-12 cnt-top column">
  Content top
</div>
<div class="mobile-12 decktop-8 cnt column">
  Content - main
  <br /> <br />
  Content - main
  <br /> <br />
  Content - main
  <br /> <br />
  Content - main
  <br /> <br />
  Content - main
</div>
<div class="mobile-12 decktop-4 cnt-right column">
  Content - right
</div>
<div class="mobile-12 decktop-12 cnt-bottom column">
  Content bottom
</div>

htmlcss

Answer №1

You can achieve a grid layout using only CSS, no need for javascript: https://css-tricks.com/snippets/css/complete-guide-grid/

Here is an example of how you can create a grid:

.grid{
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas: 
    "header header"
    "content right"
    "footer footer"
}

.header {
  grid-area: header;
  
}
.content {
  grid-area: content;
  background-color: #995595;
}
.right {
  grid-area: right;
  background-color: #559959;
}
.footer {
  grid-area: footer;
}

.header, .footer{
  min-height: 50px;
  background-color: #ccc; 
}

.grid > * {
  text-align: center;
}
<div class="grid">
<div class="header">
  Content top
</div>
<div class="content">
  Content - main
  <br /> <br />
  Content - main
  <br /> <br />
  Content - main
  <br /> <br />
  Content - main
  <br /> <br />
  Content - main
</div>
<div class="right">
  Content - right
</div>
<div class="footer">
  Content bottom
</div>
</div>

Answer №2

Utilizing either css grid or flex displays is recommended.

I suggest taking a look at the following resources:

Additionally, examining how Bootstrap 4 implemented their grid using flex can be beneficial: Bootstrap 4 Grid System

By utilizing flex, you gain more control over your grid's behavior and options compared to float.

Below is an example using flex that evenly distributes column height by default, creating a layout similar to one created with float:

<div class="row">
    <div class="mobile-12 desktop-12 column c1">
        Content top
    </div>
    <div class="mobile-12 desktop-8 column c2">
        Content - main
        <br><br><br>
    </div>
    <div class="mobile-12 desktop-4 column c3">
        Content - right
    </div>
    <div class="mobile-12 desktop-12 column c1">
        Content bottom
    </div>
</div>

<style>
    .row {
        display: flex;
        flex-wrap: wrap; /* Allow multi-line */
    }
    .column {
        flex-grow: 0; /* Prevents column from auto growing */
        flex-shrink: 0; /* Prevents column from auto shrinking */
    }
    .mobile-12 {
        flex-basis: 100%;
    }
    .desktop-8 {
        flex-basis: 66.66666%;
    }
    .desktop-4 {
        flex-basis: 33.33333%;
    }
    .c1 { background-color: grey; }
    .c2 { background-color: purple; }
    .c3 { background-color: green; }
</style>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using CSS to style HTML elements with spaces

Apologies if this question can easily be answered with a Google search, but I am having trouble finding the right keywords to use. While I have a decent grasp of CSS, I feel like there is still much more potential to explore and improve my code efficiency. ...

htmlcss

Utilizing CSS animation triggered by a timer to produce a pulsating heartbeat effect

Here's a unique way to achieve a heartbeat effect on a spinning circle. The goal is to have the circle double in size every second and then shrink back to its original size, resembling a heartbeat. To achieve this, a JavaScript timer is set up to remo ...

javascriptcsscss-animations

How can I align all the columns in every row to the left except for the first one?

To achieve the goal of making all columns except the first of a row in a table to have a text alignment of left (with the first column having a defined text alignment in CSS), the following code is utilized: <script type="text/javascript" src="../js/jq ...

jquerycsshtml-table

Jquery panoramic slider - Dynamically adjusting image width to fit screen size

Currently, I am attempting to implement a popular panning slider called Jquery Panning Slider for a website. The details regarding the markup structure, CSS, and jQuery can be found here: Slider Details. However, I encountered an issue with this slider. ...

jquerycssjquery-pluginssliderfullscreen

Send image data in base64 format to server using AJAX to save

My goal is to store a base64 image on a php server using the webcam-easy library (https://github.com/bensonruan/webcam-easy). I added a button to the index.html file of the demo: <button id="upload" onClick="postData()" style=" ...

javascriptphphtmlajaxbase64

Getting the IDs of selected nodes all the way up to the root node in jsTree

How can I retrieve the IDs of all parent nodes from a selected node to the root node in jsTree? If node C is selected, how can I obtain the IDs of all its parent nodes? Tree Structure: B C +C1 +c2 The following code snippet only returns the imme ...

javascriptjqueryhtmljquery-uijstree

How can content be effectively aligned using the Bootstrap Grid system?

For quite some time now, I've had a lingering question on my mind - "What is the proper method to align content inside a Bootstrap column?" When using the Bootstrap Grid system, I typically divide the screen width into col-md-* blocks to create colum ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Is there a way to execute a JavaScript function by clicking on an anchor tag?

Many websites, such as StackOverflow, have attempted to address this particular issue. However, the explanations provided are complex and difficult for me to grasp. I am looking for someone who can help identify my mistakes and explain the solution in simp ...

javascriptphphtmlmysql

Tips for expanding a material-ui TableRowColumn across multiple columns

Think of it as the html equivalent of the colspan attribute, where some rows have a different number of columns than others. Appreciate it! ...

htmlmaterial-ui

Tips for effectively utilizing the jQuery closest method

This webpage allows me to upload images to a database and then display them again. When uploading an image, a comment can be added to it using a textarea. When the images are displayed again, the comments are shown and editable as well. Recently, I added a ...

phpjqueryhtmlcsscomments

Does the onchange event differentiate between lowercase and uppercase letters?

Is the onchange event of the select tag case sensitive? Would it work if I use ONCHANGE instead of onchange? ...

javascripthtml

Is it necessary to utilize container or container-fluid within the grid system layout?

While similar questions may already exist on Stackoverflow, I believe the exact answer has yet to be found. Many suggest: "You should nest .col within .row, and ensure that .row is inside of .container." However, this concept still eludes me. I underst ...

javascripthtmlbootstrap-4

How can we achieve a seamless fade transition effect between images in Ionic 2?

My search for Ionic 2 animations led me to some options, but none of them quite fit what I was looking for. I have a specific animation in mind - a "fade" effect between images. For example, I have a set of 5 images and I want each image to fade into the ...

csstypescriptanimationionic2

What is causing the slight space between the navbar and the edges of my webpage?

tiny opening Here is the HTML and CSS code snippet: body { background-color: green; } .navbar { overflow: hidden; background-color: #333; text-align: center; width: 100%; } .navbar a { float: left; font-size: 18px; color: white; tex ...

javascripthtmlcssnavbar

Eliminate HTML nodes that are not currently visible

I am currently developing a Vue/Vuetify application that showcases a large number of images (10-20k) in a grid view along with some additional information. These images are grouped into different sections, and clicking on an image opens an overlay displayi ...

javascripthtmlvue.jsvuetify.js

Enhancing elements with CSS by adding transformations and box shadows upon hovering

My card component using material UI has a hover effect with a transforming animation, as well as a shadow that should appear on the card. However, I am facing an issue where the box-shadow appears on the box before the transformation, creating white space ...

cssmaterial-uitransformcard

After applying 'all: unset;' to remove all styles, the CSS hyphens property does not work as expected in Chrome

After applying this CSS code to remove all styles: * { all: unset; display: revert; } The issue arises in Chrome browser where CSS Hyphens are not taking effect. This can be seen with the following example: div { font-size: 3rem; -webkit-hy ...

cssgoogle-chrome

Unwanted overlay issues with CSS positioning

My webpage has a header div, with two nested divs called header-left-box and header-right-box that are floated left and displayed side-by-side horizontally. Following these divs, I want to include a receiver div that occupies the free space below. The is ...

csshtmllayout

CSS animation: Final position once the vertical text has finished scrolling

I have designed a CSS-animated headline with a leading word and three vertically-scrolling/fading statements to complete the sentence, inspired by the style used on careers.google.com. The animation runs through three cycles and stops, leaving the third st ...

htmlcsscss-animations

Are there any features in web browsers that support accessibility, such as those designed for sign language?

Many web browsers currently share the user's preferred language with the websites they visit (e.g. in JavaScript: navigator.language || navigator.userLanguage). However, what if a user's native language is sign language, or if they need a simple ...

javascripthtmlaccessibility