ensured maximum height of a div attached to the bottom

<body style="width: 100%; text-align: center;">
    <div style="margin: 0 auto;">container
        <div style="width: 200px; margin-top: 100px; float: left;">
            left
        </div>
        <div style="width: 728px; float: left;">
            <div style="height: 100px;">
                1
            </div>
            <div style="height: 150px;">
                2
            </div>
            <div style="margin-bottom: 0; bottom: 0; height: 100%;">
                3
            </div>
        </div>
    </div>
</body>

DIV 1 has a set height value,

DIV 2 dynamically adjusts its height using jQuery

DIV 3 needs additional styling to stretch fully down to the bottom with a bottom: 0; property

What other CSS styles should be applied to DIV 3 for it to stretch properly?

I also require that the container element is positioned in the center of the page.

Answer №2

Big thanks to the person who removed their answer, it was almost there in terms of functionality. height seems to be disregarded, but by utilizing top and position: absolute;, it did the trick. Whenever DIV 2 changes size, there should be an event triggered that resizes DIV 3:

<body style="width: 100%; text-align: center;">
    <div style="margin: 0 auto;text-align:center">container
        <div style="width: 200px; margin-top: 100px; float: left;">
            left
        </div>
        <div style="width: 728px; float: left;">
        <div style="height: 100px;" id="a">
            1
        </div>
        <div style="height: 150px;" id="b">
            2
        </div>
        <div style="background-color: red; position: absolute; bottom: 0;" id="test">
            3
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        $('#test').css('top', $('#a').height() + $('#b').height());
    });
</script>

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

How can I add a loading page to my HTML/CSS website?

Currently, I am delving into the realm of coding and have encountered an issue while trying to integrate a loading page into my HTML. Despite referencing the code from this source, it appears that the loading page is not functioning as intended. Any assist ...

PHP script not recognizing CSS styles

My coding dilemma involves a script that is supposed to display numbers from 1 to 100 in black font. For multiples of 3, it should show "Three" in green, and for multiples of 7, it should display "Seven" in blue instead of the number. If a number is a mult ...

Deleting sections of a string using JavaScript

I've encountered a rather unique issue where I need to address a bug on a website. The problem is that when a string is generated dynamically, it automatically adds 5 spaces before and after the string. Ideally, this should be fixed in the backend cod ...

unable to insert logo into HTML

I am customizing an HTML template, but the dimensions of the logo in the template are smaller than my logo. Despite adding my logo to the template, it is not showing up. @media (max-width: 673px) { #logo { margin-left: 20px; } } #header #logo ...

Turning On/Off Input According to Selection (Using jQuery)

<select name="region" class="selection" id="region"> <option value="choice">Choice</option> <option value="another">Another</option> </select> <input type="text" name="territory" class="textfield" id="territo ...

Having trouble getting StencilJS Bottomsheet to work properly? Looking for a way to smoothly slide up your content?

I've been working on creating a Bottomsheet in Stencil, but I'm facing an issue where it shows up suddenly when activated. My goal is to display the overlay when the active property is set, and then smoothly slide up the content. Below is my comp ...

Best Practices for Integrating PHP Code into an HTML File for Contact Form Placement

My current setup involves an html file named index.html, which contains the code for my contact form fields such as name and email. Is there a way to include PHP code in this file without converting it to index.php? ...

jQuery function duplicates row in table

I am trying to utilize jQuery to generate a table, but I seem to be encountering an issue with my code: function showGrid(url, container, columns, page) { jQuery(container).empty(); var tr = jQuery("<tr class=\"mobileGridHeader\"> ...

parallax scrolling can be a bit bumpy

While working on a website, I've incorporated a slight parallax effect that is functioning almost perfectly. However, I've noticed that the foreground divs tend to jump a little when scrolling down the page. At the top of the page, there is a di ...

Setting the CSS property `position: absolute; bottom: 0`, will move the div to the bottom of the screen rather than the bottom of

I'm currently working on a website where I want to attach a menu-bar to the bottom of the header using #menu { position: absolute; bottom: 0; } Unfortunately, instead of sticking to the bottom of the parent div, the menu-bar is stuck to the ...

The CSS layout is not positioning elements correctly

Here is a preview of how I want my final design to appear: I am facing difficulty in properly aligning the two columns using my CSS code. Whenever I apply the float: left; property, the columns end up stacking on top of each other. /*------ Code st ...

What is the rationale behind the preset margin on the <body> tag?

Throughout my years in development, I have primarily focused on front-end web UI development. One recurring issue that has always irked me is the constant need to reset default browser styling assumptions, which often slips my mind until it starts affectin ...

Utilize Selenium to easily navigate through joint selection and list elements

Attempting to scrape a website using beautifulSoup and selenium has led me to a roadblock with a particular dropdown select menu. The HTML structure in question looks something like this: <div class="selection-box" alt="selection" ti ...

After utilizing the function, the forward and back arrows are no longer visible

After setting up my slideshow, I encountered an issue where clicking the next or previous buttons caused them to shrink down and turn into small grey boxes. Has anyone experienced this before? This relates to PHP/HTML if ($_SERVER['REQUEST_METHOD&ap ...

What are some creative ways to customize the appearance of a PHP email form body?

I need assistance in creating a PHP form that will generate an email with visually appealing formatting. Currently, when I receive the submitted form via email, it lacks aesthetic presentation. After implementing the following code snippet, this is how th ...

Update the image within the svg tag

I am attempting to modify a preexisting SVG element within an HTML document. Here is the current code: <svg class="logo" viewBox="0 0 435 67"> <!-- IMAGE DIMENSIONS --> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo- ...

Understanding image sizes for uploads on Tumblr can be a bit confusing, especially when comparing pages to posts. Learn how to implement lazyloading for post

I'm currently working on a highly customized Tumblr account that features a mix of pages and posts. I am looking to access content and assets, particularly images, from these pages/posts for use in other parts of the site. When I upload an image to a ...

Could you provide some advice for creating a Single Page website?

I am working on a simple HTML setup with various elements such as a navbar and content blocks. <html> <head> <title>My HTML5 App</title> <meta charset="UTF-8"> <meta name="viewport" content="wid ...

HTML checkbox URL

Can you design an HTML checkbox form that generates a URL format like this: ?cat=cars+tree Currently, with the following code: <form name="input" action="/" method="post" > <br />Select Categories: <br /> <input type="checkbox" name ...

Align the Vuetify v-btn to the right in a horizontal layout

I'm having trouble aligning a v-btn to the right side. Despite trying various options, I can't seem to get it to work. I just want to know the simplest way to ensure that the register button is positioned at the very right of the column. For the ...