Is there a way to make a DIV's span equal in height to its inner H3

I am working with a layout that looks like this ...

<div style="width: 99%; border: 1px dotted #0683DA; padding: 8px;">
    <h3>Some Header</h3>
    <div class="d-dataGridBodyRow" style="padding: 0px">
        <table style="vertical-align: top;">
            <tr>
                <td colspan="4" id="ErrMsg" runat="server">
                </td>
            </tr>
            <tr>
                <td style="vertical-align: top; width: 15%;">
                    <p class="FieldLabel">
                        Field 1:</p>
                </td>
                <td>
                    <asp:TextBox ID="Field1" runat="server"></asp:TextBox>
                </td>
                <td style="vertical-align: top; width: 15%;">
                    <p class="FieldLabel">
                        Field 2:</p>
                </td>
                <td valign="top">
                    <asp:TextBox ID="Field2" runat="server"></asp:TextBox>
                </td>
            </tr>
            // more table rows...
        </table>
    </div>
</div>

... however, the outer div only covers the height of the h3 element. How can I make it span the height of the inner div as well?

htmlcss

Answer №1

Chances are there is a CSS rule causing the .d-dataGridBodyRow to float. If you want the outer <div> to completely contain it, a simple solution is to apply the CSS rule overflow: hidden. If that is not feasible (if you explicitly need overflowing content), you can try using the standard clearfix method.

Answer №2

The div within does not contain any content, which is why it does not take up any space. Modify it to:

<div style="width: 99%; border: 1px dotted #0683DA; padding: 8px;">
    <h3>A Header</h3>
    <div class="d-dataGridBodyRow" style="padding: 0px">&nbsp;
    </div>
</div>

Answer №3

Set the inner div to have a height of 100%

<div class="d-infoPanelContent" style="margin: 0; height:100%">
</div>

Answer №4

When content is added to the div element, it automatically adjusts its height.

<div style="width: 99%; border: 1px dotted #0683DA; padding: 8px;">
    <h3>Sample Heading</h3>
    <div class="d-dataGridBodyRow" style="padding: 0px">
        Hi there
    </div>
</div>

Answer №5

Ensure the second div has a specified height, or add some content to it. It is currently not occupying any space, which is why it is not visible.

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

Animate the chosen text via specialized effects

I am trying to implement a show/hide feature for specific text using jQuery. The challenge I am facing is having multiple instances of the same text tag with identical ids. I want to trigger the animation on a particular child element when hovering over it ...

jqueryhtml

Element in list does not cover entire ul

I'm having trouble getting my list elements to span the entire width of the unordered list. I've tried applying styles to the nav ul li and setting the width to 100%, but nothing seems to work. How can I achieve this? .nav-container { border- ...

htmlcss

Thumbnail vanishes upon being selected

To access my template site currently, please click here. Currently, the first thumbnail on my website is set up to display a gallery of images in FancyBox once clicked, similar to a question asked on StackOverflow that you can view here. Below is a snipp ...

jqueryhtmlcssfancybox

What is the best method to deactivate zoom in/out buttons using JavaScript?

As a newcomer to Phonegap, I've managed to implement zoom in/out functionality using websettings in the .java file. However, I now face a challenge where I need to disable/enable the zoom in/out buttons and stop scrolling at a specific point. I attemp ...

javascriptandroidhtmlcordova

Why won't my sticky element function properly with the position attribute set to sticky?

Hey there! I've been diving into learning all about CSS positions and have nailed down most of them. However, for some reason, the sticky position just won't cooperate and is stubbornly acting like a relative one instead. Check out my HTML snipp ...

htmlcss

Is it possible to use CSS border-radius without any vendor prefixes?

Are there alternative methods to create rounded borders without using the -moz prefix, since this only applies to Mozilla browsers? -moz-border-radius-topleft:3%; -moz-border-radius-topright:3%; -moz-border-radius-bottomright:3%; -moz-border-radius-bott ...

jquerymozillacss

Execute AJAX function when loading a form populated from a MySQL/PHP database

I am currently working on a drop-down menu that is being populated from a MySQL table using PHP. The goal is to have a second drop-down menu triggered based on the selection made in the first form. This functionality works perfectly when a selection is mad ...

phphtmlmysqlajax

The Bootstrap Grid System Column is Experiencing Issues

Check out my code snippet: I've attempted changing the container class to container-fluid and resizing the page, but no luck. <div class="container"> <div class="row"> <!--Product: banana split--> ...

htmlcssbootstrap-5col

VueJS component fails to remain anchored at the bottom of the page while scrolling

I am currently using a <md-progress-bar> component in my VueJS application, and I am trying to make it stay fixed at the bottom of the screen when I scroll. I have attempted to use the styles position: fixed;, absolute, and relative, but none of them ...

javascriptcssvue.jsvue-material

Having trouble implementing a CSS style for a Kendo-checkbox within a Kendo-treeview component

I am facing a The issue I am encountering is that while the CSS for k-treeview is being applied from the scss file, it is not being applied for the kendo-checkbox I attempted to resolve the problem by using the following code: <kendo-treeview ...

cssangularkendo-uikendo-treeview

How can I apply borders to individual columns within a Bootstrap table without affecting the rows?

My attempted solution involved adding th and tfoot. However, I faced issues with applying borders to only the td elements - border was not being applied at the bottom of the table, and the thickness and color of the borders were inconsistent between column ...

cssbootstrap-5

JavaScript source control tool

Is there a Java-based version of GitHub? I am interested in developing a dynamic application using HTML5 and Javascript, and had the thought of integrating Git to monitor data changes. Therefore, I am curious if there exists a JavaScript adaptation of a G ...

javascriptjquerygithtml

Interactive SVG viewport dimension

Check out my "hamburger button" made in SVG, shown below. body { margin: 0; text-align: center; } svg#ham-btn { margin: 2rem; border: 1px solid black; fill: #383838; } <svg id="ham-btn" width="107.5px" height="80px" viewBox="0 0 80 80" pre ...

htmlcsssvg

What causes my divs to change position when using text <h1>?

When I have multiple divs grouped together inside another div, the placement of my h1 tag shifts downwards. How can I prevent this from happening and ensure that the text is added without any unwanted shifting? This issue only occurs when there are two o ...

htmlcsstextpositioning

Struggling with the display property d-none in Bootstrap

I'm currently attempting to show a segment of my code exclusively on medium-sized screens and larger, while displaying another portion of the code solely on small and extra-small screens through the utilization of Bootstrap. I made use of Bootstrap&ap ...

htmlbootstrap-4

Color-coding HTML table cells depending on the SQL flag value

After successfully constructing a SQL query that incorporates three conditions from my database table and sets a flag based on them, I have made progress in my project. The query looks like this: UPDATE staging SET `miuFlag` =1 WHERE `lowSideMIUNumAr ...

phphtmlcssmysql

Positioning the .aspx buttons in a coordinated manner

In my update panel, I have a label, a dropDownList, and two buttons: <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> <ContentTemplate> <div id="dropDownList" style="position:relative;" runat=" ...

asp.netcss

The Mat-paginator is refusing to align to the right edge when scrolling the table horizontally in an Angular application

https://i.sstatic.net/l0cZ4.png Overview: My Angular component features a table with Angular Material's mat-table and paginator. Despite fetching data from a source, the paginator fails to float right when I scroll horizontally. Sample Code: <!- ...

htmlcssangularangular-material

React App anchor tag's external links fail to function properly on subsequent clicks when accessed through mobile devices

I have encountered an unusual issue with <a> anchors for external links in my React App on mobile viewports. Initially, clicking an external link opens a new tab just fine on mobile. However, subsequent link clicks on the same or other <a> elem ...

javascripthtmlreactjs

Dropdown navigation with CSS

It seems like there's a simple oversight on my end... The drop-down menu I created is causing the main navigation bar to expand. You can view the page I'm working on by following this link. The issue occurs with the navigation below the App butto ...

htmlcssdrop-down-menunavigation