Adjust the height of the element to match the parent's height

I am working on a design with a structure like this:

<section>
    <h3>Title:</h3>
    <p>Content that may span multiple lines.</p>
</section>

section
{
    background: #5E5E5E;
    overflow:hidden;
}

h3
{
    background: #B31B1B;
    padding: 13px;
    width: 174px;
    float:left;
}

p
{
    margin: 13px 13px 13px 213px;
}

I'm facing an issue where the background of the title does not extend to the bottom of the section when the content in the <p> tag is more than one line.

Is there any solution other than the faux columns technique that I can use to address this problem?

htmlcssheight

Answer №1

To achieve the desired layout, consider using absolute positioning for the <h3> instead of floating it. Here is an example of how you can implement it:

section {
    background: #5E5E5E;
    position: relative;
    overflow: hidden;
}

h3 {
    background: #B31B1B;
    padding: 13px;
    width: 174px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}

p {
    margin: 13px 13px 13px 213px;
}

For a live demonstration, you can visit this link.

It is important to note that absolutely positioning the <h3> may pose challenges if it ends up taller than the <p> since absolutely positioned elements do not affect the height of their parent:

You can view an example of this scenario here.

At the moment, I do not have a perfect solution for addressing this issue.

Answer №2

Is it possible to set the background for the section element instead of the h3 heading?

Answer №3

Another option may involve relocating the background styling to the SECTION and P elements.

section {
    background: #B31B1B;
    overflow:hidden;
    padding: 0;
}

h3 {
    padding: 13px;
    width: 174px;
    float:left;
}

p {
    margin: 0;
    background: #5E5E5E;
    padding: 13px;
    margin-left: 213px;
}

http://jsfiddle.net/pEfGq/

Answer №4

Experiment with setting min-height to 100% for h3 elements!

Answer №5

All you need to do is specify the height of the h3 element as 100%.

h3
{
      background: #B31B1B;
      padding: 13px;
      width: 174px;
      float:left;
      height: 100%;
}

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

jQuery Autocomplete without dropdown menu suggestion available

I'm working on a form for my webpage and I want to enhance user experience by adding autocomplete functionality. The goal is to suggest existing names as users type in the 'name' input text box. Although I can see in my console that it&apos ...

jqueryhtmlajaxautocomplete

Tips on altering the h2 color when hovering using h2:hover:after

I'm attempting to alter the color of my h2 element using h2:hover:after. Can someone guide me on how to achieve this? Here is what I have tried so far. h2 { font-size: 25px; } h2:after { content: ""; display: block; width: 14%; padding-to ...

htmlcss

What is the best way to fill the dropdown options in every row of a data table?

This HTML snippet displays a data table with test data and corresponding dropdown options. <tr> <th> Test Data </th> <th> Test Data ...

javascripthtmlangulartypescriptprimeng

Traversing JSON Data using Vanilla JavaScript to dynamically fill a specified amount of articles in an HTML page

Here is the code along with my explanation and questions: I'm utilizing myjson.com to create 12 'results'. These results represent 12 clients, each with different sets of data. For instance, Client 1: First Name - James, Address - 1234 Ma ...

javascripthtmlcssajaxapi

Python script for extracting content from web pages that are loaded dynamically

I am facing an issue with extracting content from a webpage on my website. Despite trying to use selenium and clicking buttons, I have not been successful. #!/usr/bin/env python from contextlib import closing from selenium.webdriver import Firefox import ...

javascriptjquerypythonhtmlselenium

Changing a background image url using jQuery by clicking a button

I'm struggling to find a way to use jQuery to add a background image URL to my CSS. Everything I've attempted so far has been unsuccessful. let button = document.querySelector('form button.btn') button.addEventListener('click&ap ...

javascriptjqueryhtmlcss

What is the method to display Post values to the user without necessitating a page reload?

Currently, I am attempting to utilize Ajax to send the user's inputted data from a JSP page. Through Ajax, I have successfully transmitted the variable "vars" to the Jsp page. The output upon registration includes: Registration is Successful. Welcome ...

htmlajaxjsp

The issue with height percentages being ineffective in CSS

My goal is to utilize the height property with percentages, however it seems to be ineffective. I desire to use percentages so that the layout appears well in various resolutions. <div id="bloque_1" style="height: 80%;background: red"> </div> ...

htmlcssheight

Generate a new tree structure using the identifiers of list items within an unorganized list

Attempting to convert the id's of li's in a nested unordered list into valid JSON. For example, consider the following list. To be clear, the goal is not to create the UL list itself, but rather the JSON from the li id's <ul class="lis ...

javascripthtmljson

Creating a sleek full-page container with a navigation bar using TailwindCSS

I am currently utilizing Tailwind CSS and in need of creating a layout that consists of: A sticky navigation bar A full-page section with content centered Other sections with varying heights A footer Below is a simple representation: +------------------- ...

htmlcssfrontendtailwind-css

Strategies for Preserving Added Field Data Using JQuery

I am working on a code that dynamically adds fields to a form, you can see it in action on this jsFiddle. My question is, is there a way to keep the newly added fields even after the form is submitted and the user returns to the page? I'm not looking ...

jqueryhtmldatabasetheory

Develop interactive card collections in Bootstrap that adapt to different screen sizes

I am currently working on developing a responsive card deck using Bootstrap. The goal is to have the card deck display one card per row on mobile, 2 cards per row on tablet, and 3 cards per row on desktop. Below is the snippet of the code I am using: < ...

csstwitter-bootstrapbootstrap-4

Ways to set a background image for two separate components in Angular

Trying to figure out how to integrate this design: https://i.sstatic.net/r70a4.png The challenge lies in having a background image that spans across the navbar and the content below it. Currently, the code separates the navbar component from the content ...

htmlcssangular

Separate the two divs with some added spacing

I am facing a challenge in creating a navbar with two regions split by white space. I attempted to use float:right and justify-content: space-between, but it doesn't seem to work as expected. My goal is to have site-header-right on the right side and ...

htmlcssflexbox

Arranging the list items in a perfectly straight vertical line

Concern: I'm struggling with alignment issues on my website. I have country flags displayed using display:inline;. The issue arises when the number next to the flag exceeds single digits (e.g., 10 or more) as it affects the alignment due to the consi ...

htmlcsslistalignment

Footnotes integrated directly into the text using only HTML and CSS (in-line notations?)

Instead of appearing below or alongside the main content, notes on FiveThirtyEight expand within or below the paragraph when the note tag is clicked. They could be referred to as "in-notes" instead of footnotes. I personally find this system very efficien ...

htmlcssfootnotes

The React MUI v5 Card's background features a subtle white hue with a 5% opacity, leaving me curious about its origin

I've noticed a strange styling issue in my code. It seems to be related to a class called .css-18bsee0-MuiPaper-root-MuiCard-root, possibly from MUI's Card or MUI's Paper components. However, I can't find it in my own code. While tryin ...

cssreactjsmaterial-ui

Tips for verifying jquery datePicker dates?

Here are two input fields, startDate and tilldate, which utilize the jQuery datepicker plugin. The issue at hand is that when a user selects a date in the startDate field, only the next two days should be available for selection in the tillDate field. Fo ...

jqueryhtmljquery-uijquery-ui-datepicker

How to set a variable in a Python Selenium script based on webpage content

I attempted this method but it did not yield the desired results Is there a way to capture the value of an element from a web page and assign it to a variable using Selenium with Python in PyCharm? 250 a = driver.get.element(By.ID, "rate").tex ...

pythonhtmlseleniuminnerhtml

Struggling to get collapsible feature functioning on website

I'm trying to create a collapsible DIV, and I found a solution on Stack Overflow. However, I'm having trouble getting it to work on my website. I created a fiddle with the full code, and it works there. But when I implement it on my site, the con ...

javascripthtmljquery