Ensure that two div elements expand to occupy the available vertical space

I am looking to create a layout similar to the following:

|---| |------------|
|   | |      b     |
| a | |____________|
|   | |------------|
|___| |______c_____|

Here is the code I have so far:

<table>
    <tr>
        <td class="leftSide">a</td>
        <td class="rightSide">
            <div class="mainContent">b</div>
            <div class="bottomContent">c</div>
        </td>
    </tr>
</table>

In this design, if the combined height of b and c exceeds that of box a, box a's height will adjust accordingly. This functionality works because the .rightSide element is set to display: table, with divs b and c being set to display: table-row.

However, in cases where the content within box a causes it to be taller than the right side, the heights of elements inside the right side do not adjust accordingly. While the containing td resizes, its contents do not. Is there a way for b (.mainContent) to fill the remaining height when this occurs?

JSFiddle Link

csshtml-table

Answer №1

To address your query, you may want to utilize the rowspan attribute. By doing so, you can have a single td element span across multiple rows.

You can experiment with the following code snippet:

<table>
    <tr>
        <td class="leftSide" rowspan="2">a</td>
        <td class="rightSide">b</td>
    </tr>
    <tr>
        <td class="rightSide">c</td>
    </tr>
</table>

Feel free to check out this JSFiddle link for a practical example.

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

Obtaining solely the words found within HTML documents

In my Python 2.7 project, I have a folder containing multiple HTML pages that I need to extract only words from. My current process involves opening the HTML file, using the Beautiful Soup library to extract text, and then writing it to a new file. However ...

javascriptpythonhtmlcsspython-2.7

Trouble with addClass function not functioning properly on dynamically generated list items while using search feature in Laravel 5

Seeking assistance with a search form that allows users to search for products. Search Form: <form class="navbar-form pull-right no_padding m_top_0 m_bottom_0 formSearchProduct" role="search" onsubmit="return false;" autocomplete="off"> <inp ...

phpjquerycssajaxlaravel-5

The child element extends beyond the boundaries of its parent container in HTML

Have you ever encountered a situation where the inner div element is wider than the outer div? It can be a bit frustrating, but there are ways to address this issue. So, what causes this to happen in the first place? And more importantly, how can we ensur ...

htmlcss

Customizing Material UI Stepper styles using CSS API

I am trying to customize the text color (represented by an SVG Icon) in Material UI StepIcon for active and completed steps only. Currently, I have successfully changed the icon color for those steps. This is how my custom MuiTheme appears: export default ...

javascriptcssmaterial-designmaterial-uiuistepper

Transition effortlessly between web pages with subtle fading effects

I want to implement smooth page transition effects between two web domains: mcpixel.co.uk/new and mcpaper.co.uk. I am the owner of both domains. When a link in the header is clicked, I'd like the page to fade transition to the new page without any whi ...

javascriptphpjqueryhtmlcss

The automated test locator in Angular using Protractor is failing to function

I am facing a challenge with my angular web application as there are some elements that are difficult to interact with. One specific element is a checkbox that needs to be checked during testing: ` <div class="row form-group approval_label"> < ...

javascripthtmlcssangularjsangular

Prevent tooltips from displaying outside of an HTML table by using the overflow hidden property for horizontal scrolling

TL;DR: Struggling to position and display tooltips in a table due to the constraints of overflow: hidden. An example has been created to demonstrate the issue with tooltips not displaying correctly within a table. The problem arises because the table nece ...

htmlcsshtml-table

Adjusting Window Size Causes White Space to Appear Above Div

I currently have two inline-block div in my post page that showcase my latest book reviews. Typically, these sections align perfectly and occupy the same amount of space on the screen. However, for certain window sizes, one of the inline-block elements end ...

htmlcss

Content OverFlow: DropDown Menu is not overlapping the content, but rather pushing it downwards

In my webpage, I have a drop-down menu that traditionally pushes the content below it down to make space for its items. However, I want the drop-down to overlap the contents below without affecting their position. I've tried various solutions, such a ...

javascriptjquerycssdrop-down-menuxhtml

What is the method for changing the color of text within a button when hovering using CSS?

In my OceanWP WordPress theme, I customized the top-bar menu by adding a button labeled "Post a Job" using CSS. Screenshot Link I have two top-bar menus - one for logged-in users and another for logged-out users. The "post a job" button has a 2px purple ...

csswordpress

Looking for a drum set with clickable buttons? Having trouble changing the background color in CSS/HTML? Wondering how to map keyboard keys to HTML buttons?

Behold my HTML creation: <H1> <center> EPIC GUITAR JAM </center> </H1> <img class="guitar" src="guitar.jpg" /> <button class="strum" onclick="Strum()"> Strum Chord </button> <button class="pluck" o ...

javascripthtmlcsskeyboardbackground-color

Overlap with upper picture formatting

I've been struggling to create an ion-card with two images: a main picture and a small book cover. Any ideas on how to achieve this? Note: The layout should have 2 images, one at the top and another as a small book cover. Check out this sample on St ...

cssangulartypescriptsassionic3

Step-by-step guide to implementing a sticky header while scrolling

How can I implement a fixed header on scroll, like the one seen on this website: www.avauntmagazine.com Here is the HTML for my header: <div class="bloc bgc-wild-blue-yonder l-bloc " id="bloc-1"> <div class="container bloc-sm"> &l ...

javascripthtmlcss

Setting column heights and spacing in Bootstrap

I'm looking to dynamically populate the blocks. Essentially, a for loop would be used to pass the data. However, I'm facing some challenges with the height of the blocks at different screen sizes while utilizing bootstrap 4. My goal is to have th ...

htmlcssbootstrap-4

Order of flexbox items when placed within separate divs?

Looking to rearrange the order of items using flexbox, but hitting a roadblock because one of the items I want to reorder is in a different div and not a direct child of the same parent as the other items. <div class="wrapper"> <div class="some ...

htmlcssflexbox

Browser and contexmenu intersecting halfway

I have successfully implemented a custom context menu in my HTML project. It functions well, but I am facing an issue where half of the menu appears off-screen to the right. Is there a way to detect this and reposition the menu above the mouse pointer? He ...

javascripthtmlcss

The image will remain hidden until it is fully loaded and ready to be displayed

I am currently working on a script that involves displaying a loading icon until an image is fully loaded, at which point the loading icon should disappear and the image should be shown. Unfortunately, my current code is not working as intended. Here is a ...

javascriptjqueryhtmlcss

What is the best way to implement this design using CSS flexbox?

I'm working on designing a simple layout that looks like this: https://i.stack.imgur.com/oCzyV.png Currently, I have the following HTML structure with some variations in class names and additional markup within each element: <div class="site ...

htmlcsslayoutflexbox

What is the best way to insert a scroll into a section of a circular shape seamlessly?

Currently, my layout looks like this: https://ibb.co/iqaOXS However, I would like it to look more like this: https://ibb.co/eDkCRn The issue I'm facing is that the buttons are extending beyond the circular border. How can I prevent this from happeni ...

htmlcsswebscrollscrollbar

Having trouble with the CSS `not` selector?

Below is the code snippet I experimented with XHTML <div> <span>Span1</span> <span>Span12</span> <span>Span13</span> </div> <div> <span>Span1</span> <span> ...

javascripthtmlcss