Creating CSS styles for fluid width divs with equal height and background images

Looking to create a layout with two side-by-side divs of equal width - one containing an image and the other dynamic text that can vary in height from 400px to 550px based on input. The goal is for the image to align flush at the top and bottom with the text box, all within a fluid container element for responsiveness.

Desired Outcome

https://i.sstatic.net/kp2u8.gif

Currently using floats to line up elements, but the image falls short:

https://i.sstatic.net/HKGVf.gif

Attempted setting the image as a background-image with CSS properties, but encountering issues with maintaining alignment when resizing browser due to aspect ratio changes.

Hoping to find a solution without resorting to Javascript.

html css

Answer №1

To create a table layout, use display:table for the container and display:table-cell for the inner divs. Also, remember to eliminate the use of float.

Check out the demo here: http://jsfiddle.net/afelixj/26b3vtfx/2/

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

employing rowspan functionality within a JavaScript application

How can I achieve a table layout where the first two columns are fixed for only one row and the remaining rows are repeated 7 times? Additionally, is there a way to make the bottom border of the last row thicker? Check out the expected table for reference. ...

javascript html css

Using HTML and CSS to Trigger Animation of Gif (or video) Upon Mouse Hover, Depending on Mouse Position

Is there a way to create an animation for a gif or video that changes based on the position of the mouse relative to the frame? For example, if the gif shows someone turning around 360 degrees, I would like the person to be facing forward when the mouse i ...

html css animation video gif

Using Bootstrap4 to merge rows into a single column or apply rowspan in Bootstrap

Hey there, I have a specific requirement that I need help with. Check out the image here. I want to enable the LCM information box when the LCM checkbox is checked. Below is my code: <div class="panel-body "> <div class="c ...

javascript css bootstrap-4

Unable to apply .png image using the content property in a Symfony project

I have a png image located in src/AppBundle/Resources/public/img To set the png image using the css content property, I used this code: content: url(../../public/assets/img/optional-checked.png); However, I encountered an error: GET http://127.0.0.1:80 ...

css symfony

Transferring identification data between views within an application (AngularJS, NodeJs, HTML)

I'm working on an HTML page that lists users from MongoDB. The page allows for deleting and updating users. I am encountering an issue with the update button - I want a new HTML page to appear with a form when the button is clicked, capturing the user ...

javascript html angularjs

Instructions on uploading a PDF file from a Wordpress page and ensuring the file is stored in the wp-content upload directory folder

What is the process for uploading a PDF file on a WordPress page? <form action="" method="POST"> <input type="file" name="file-upload" id="file-upload" /> <?php $attachment_id = media_handle_upload('file-upload', $post->I ...

javascript php html css wordpress

Using Javascript and CSS to Float DIV Elements

Recently, I've been working on a small algorithm that adds a special class to an element when the mouse reaches the halfway point or beyond on the X-axis of the browser. I also have a screenshot that demonstrates where this application will be utiliz ...

javascript html css

Generate a standard Wordpress menu containing all pages without the need to manually add each page in the menu editor

I'm struggling to figure out how to display all pages in WordPress without manually adding them to a menu. Instead of creating a new menu and selecting specific pages, I want to automatically show all existing pages in the menu. For example, if I ha ...

php html wordpress

Exploring the process of retrieving outcomes from Node.js within a Knockout ObservableArray

Below is the Node.js code snippet I have: var http = require('http'); var port = process.env.port || 1337; var MovieDB = require('moviedb')('API KEY'); MovieDB.searchMovie({ query: 'Alien' }, function (err, res) { ...

javascript html node.js knockout.js

Troubleshooting issues with Bootstrap Accordion functionality within a React environment

After copying and pasting the Accordion code directly from Bootstrap, I'm facing an issue where the style is not consistent and the functionality isn't working as expected. Snippet from About.js: import React, { useState } from 'react' ...

html reactjs bootstrap-4 accordion bootstrap-accordion

Css animations not functioning properly in Chrome

I've been working on this animation project, here is the link: http://codepen.io/Zeaklous/pen/dIomg It seems to work perfectly fine on Firefox but not on Chrome. Here is the code snippet: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/ ...

html css

Implement a smooth transition effect when changing the image source

I am currently working on enhancing a Squarespace website by adding a new image fade-in/fade-out effect when the mouse hovers over one of three buttons. The challenge I'm facing is that the main static image is embedded as an img element in the HTML r ...

javascript html css

I am experiencing difficulty with the Click() operation in Selenium web driver as it is not successfully redirecting me to another page

Hello everyone, I could really use your assistance with a problem I'm facing. WebElement wb=driver.findElement(By.name("NavHeader1$tabs$ctl00$btnNavHeaderTab")); Actions act=new Actions(driver); act.moveToElement(wb).perform(); ...

javascript html selenium selenium-webdriver

The error message indicates that the element countdown is missing or does not exist

I typically refrain from discussing topics that I'm not well-versed in (my weak spot has always been working with time and dates in javascript), but I find myself in urgent need of assistance. I've decided to use this link to showcase a countdow ...

javascript jquery html css

How can I remove the outline when focusing with the mouse, but still retain it when focusing with the

Is there a way in JavaScript to detect if an element received focus from the keyboard or mouse? I only want the outline to show when it's via the keyboard, not the mouse. If this is possible, how can I override the browser's default outlining be ...

javascript jquery html css

For Flexbox front end design, the left side should be contained within a container while the right side should seamlessly stretch across the

I'm facing a challenge in designing a website with a unique layout that has left me puzzled. I've created a codepen example to showcase what I'm trying to achieve. Specifically, I need to implement a Hero Banner on top of a standard 1200px ...

html css flexbox

CSSer Q&A

Creating CSS styles for fluid width divs with equal height and background images

Answer №1

Similar questions

employing rowspan functionality within a JavaScript application

Using HTML and CSS to Trigger Animation of Gif (or video) Upon Mouse Hover, Depending on Mouse Position

Using Bootstrap4 to merge rows into a single column or apply rowspan in Bootstrap

Unable to apply .png image using the content property in a Symfony project

Transferring identification data between views within an application (AngularJS, NodeJs, HTML)

Instructions on uploading a PDF file from a Wordpress page and ensuring the file is stored in the wp-content upload directory folder

Using Javascript and CSS to Float DIV Elements

Generate a standard Wordpress menu containing all pages without the need to manually add each page in the menu editor

Exploring the process of retrieving outcomes from Node.js within a Knockout ObservableArray

Troubleshooting issues with Bootstrap Accordion functionality within a React environment

Css animations not functioning properly in Chrome

Implement a smooth transition effect when changing the image source

I am experiencing difficulty with the Click() operation in Selenium web driver as it is not successfully redirecting me to another page

The error message indicates that the element countdown is missing or does not exist

How can I remove the outline when focusing with the mouse, but still retain it when focusing with the

For Flexbox front end design, the left side should be contained within a container while the right side should seamlessly stretch across the

Is it possible to trim a video using HTML code?

Set YouTube Playlist to start from a random index when embedded

The drop-down links vanish into the depths of the webpage's body

"Using Mxgraph's getPrettyXml function does not retrieve the value of a custom