Place the div at the bottom of the container with a flexible height determined by the content-wrapper

Can anyone help with a css problem I'm having?

I am trying to create two columns, each containing dynamic content and images at the bottom of the column. Here is an example image for reference: https://i.sstatic.net/pvOef.png

I want these image blocks to be positioned at the bottom of each column without setting a specific height for each column using position:absolute.

This is what my HTML structure looks like:

<div class="wrapper">

    <div class="content">
         {text content / dynamic }
        <div class="grid"> <!-- image blocks -->
        </div>
    </div>

    <div class="content">
         {text content / dynamic }
        <div class="grid"> <!-- image blocks -->
        </div>
    </div>

</div>

Answer №1

It seems like you're looking to align the bottom of a container's right and left sides. One way to achieve this is by using display:flex property.

<div class="wrapper" style="display:flex; width:100%; height:auto; justify-content:flex-start; align-items:center;"></>

Don't forget to add your other styling codes, the align-items property will help you align your content containers vertically at the center.

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

When utilizing the JavaScript createElement() method to create elements on keydown, it will not be compatible with jQuery's draggable() method

I'm currently developing a drag and drop feature for a project, allowing users to add items to a work area and then position them by dragging. I'm facing an issue where I want to create multiple instances of the same element using a key code, but ...

Using jQuery to move a div to a specific location on the page

Is there a way to translate the position of div x and y using Jquery that is compatible with all browsers, such as IE 7, IE8, IE9, and IE10? I have attempted the following: <div id="s1" style="-ms-transform:translate(159,430)"> hello ...

Using Javascript to access a website from a Windows Store application

Currently, I am working on a project to create a Windows store app using HTML and JavaScript. One of the key components of my app involves logging into a specific website with a username and password. Here is an example website for reference: The process ...

Removing a Dom element using stage.removeChild( )

When the number 6 is typed and entered into the game, the function correct() in the code snippet below determines what action to take. I would like to remove the DOM element gg (the equation 3+3=input) from the stage after typing 6 and pressing enter. How ...

Distribute the text evenly on either side of the center

I have a unique layout with two datalist elements centered, text positioned above, and two buttons integrated. body { background-color: DarkGray; } h1 { color: black; font-size: 30px; font-family: 'lucida console' } span { color: #4434 ...

When the class changes, V-for re-renders every component

Currently, I am in the process of changing classes for images based on their index using the moveIndex method and key events. While this works smoothly on computers, it seems to take significantly longer when implemented on TVs. The process runs smoothly w ...

Grab the webpage's URL by collecting the link from the src attribute of the script tag using XSLT

Can XSLT be used to extract a URL link specified within the src attribute of a script tag in an HTML file? Here is an example of the HTML file: <HTML> <BODY> <SCRIPT language="javascript" src="http://myspace.com" type="text/javascript"> ...

Manipulating content with JavaScript in Internet Explorer using the outerHTML property is a powerful

Encountering an Issue with outerHTML in IE Browser If I try the following: txt = "Update Complete!"; msg = sub.appendChild(d.createElement("p")); msg.outerHTML = txt; It works without any problem. However, if I use: txt = "1 Error:<ul><li> ...

Could the quantity of JavaScript files impact the performance of a project and cause any delays?

In my current HTML and JavaScript project, I am incorporating multiple JavaScript files. I'm curious to learn about the potential impact of having numerous JavaScript files on a web project's efficiency and speed. Can anyone shed some light on th ...

Return to the initial stage of a multistep process in its simplest form following a setTimeout delay

I recently customized the stepsForm.js by Copdrops and made some modifications. Although everything works well, I'm struggling to navigate back to the initial step (first question) after submitting the form due to my limited knowledge of JavaScript. ...

Modify the color of the footer area and eliminate any underlines present

In the footer section, the tags are displaying in blue color and I would like to remove the line under the li tags. If necessary, I can provide additional HTML or CSS code for reference. Below is the snippet of HTML and CSS related to the footer: My HTML ...

Property float does not account for margin values

Currently delving into the world of the semantic-ui framework, I have been working with segments. Here is a snippet of my code: <!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery ...

CSS problem causing issues with block display in basic gallery

I've created this code: <head> <style type="text/css"> div.img { margin: 2px; border: 1px solid #0000ff; height: auto; width: auto; float: left; text-align: center; } div.img img { display: inline; margin: 3px; border: 1 ...

Is a non-traditional fading effect possible with scrolling?

I have implemented a code snippet to adjust the opacity of an element based on scrolling: $(window).scroll(function () { this = myfadingdiv var height = $(this).height(); var offset = $(this).offset().top; var opacity = (height - homeTop + ...

Utilizing the '::marker' pseudo-element for generating Markdown-inspired headers

This code snippet is functioning correctly, however, I have a suggestion to make it more appropriate. Instead of using '::before', why not try using '::marker'? I attempted this adjustment but encountered an issue. Can anyone explain wh ...

Retrieve a time stamp value from a database and showcase it using jQuery

My database query is retrieving the timestamp of when an item was entered, which I am then echoing back to my main page using PHP. The timestamp is in the format YYYY-MM-DD HH:MM:SS:MS and is displayed correctly in an HTML table. However, when I click on a ...

Arranging hierarchical data in JavaScript

After populating the hierarchy data, it is structured as follows: Here is a screenshot: I am looking to sort this data. Currently, I have a flat data object for rendering purposes. For example, my rendering object looks like this: renderedobjects=[ {1,. ...

Tips for determining the actions of a node prior to its inception

Is there a way to automatically run scripts on specific elements after their creation? For example, using a jQuery plugin like autoresize to expand the height of a textarea. If I use $('.textarea').autosize(), only the current textareas will be a ...

Steps to record and upload a video directly to the server using getusermedia

For my application, I need the user to record a video and have it saved on the server disk instead of downloading it to the client browser. I am currently using getusermedia for this purpose, with the following code: (function(exports) { exports.URL = exp ...

Adjust the size of the frame by dragging the mouse cursor to change both the width

I'm a bit lost on where to direct this question, so I decided to include the html, web, and css categories (though I suspect it's related to css). The task at hand involves creating an html page with a fixed header, while the content area compris ...