Create a pair of blocks that are identical in size and positioned next to each other

I am encountering difficulties with a seemingly simple task. Here is what I want to achieve: https://i.stack.imgur.com/z7ITk.png

My goal is to have two red blocks of equal height, even if the content inside them varies in height. Using a table is not ideal due to issues with borders and margins. I have experimented with negative margins as a solution but did not find success.

After abandoning the table approach, I attempted to create the desired space between the blocks using outline, background-clip, and background-offset properties. However, this method was not foolproof and seemed overly complex for such a basic requirement.

Another tactic I tried was setting fixed heights for the red blocks and making adjustments with media queries for responsiveness. This approach caused problems with overflow and excessive padding at the bottom due to uncertain content sizes.

Additionally, I prefer to avoid flexbox due to compatibility concerns and JavaScript as a workaround for CSS issues.

Any suggestions or ideas would be greatly appreciated. Thank you!

htmlcssheightresponsive

Answer №1

Do you think this solution would work for your needs? I recommend using flex-grow, as it has good support.

.container {
  display: table;
  width: 100%;
  max-width: 500px;
}

.col {
  padding: 2rem;
  width: 200px;
  display: table-cell;
  background-color: red;
  border: 2px solid #000;
}
<div class="container">
  <div class="col">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales et quam vel fermentum. Maecenas scelerisque mauris quis orci convallis pretium.</p>
  </div>
  <div class="col">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales et quam vel fermentum. Maecenas scelerisque mauris quis orci convallis pretium. Duis scelerisque magna egestas efficitur fermentum. Aenean varius vitae ipsum at rutrum. Quisque at convallis odio, ac ullamcorper arcu. Praesent dignissim ornare tortor, et fringilla arcu.</p>
  </div>
</div>

Answer №2

After experimenting with different methods and taking your suggestions into account, I finally found a solution that worked for me: I initially tried using display: grid, which looked great on Chrome but not so good on IE 11 (even after adding prefixes like -ms-). I used display: grid and grid-template-columns: 30% 70%, which should have worked in theory...

Next, I switched to display: flex (without needing flex-grow, but still added prefixes) and it ended up working perfectly, even in IE.

So my final choice was to go with flexbox for this project.

Answer №3

To achieve this outcome, utilizing the display: grid property is the recommended approach (learn more). Similarly, the same result can also be accomplished using properties like flexbox (discover more).

.container {
  border: 2px solid black;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
  padding: 15px;
}
.container div {
  background: tomato;
  border: 2px solid #aaa;
  padding: 20px;
}
<div class="container">
  <div>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.</div>
  <div>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem.</div>
</div>

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

Error: Angular encountered an unexpected token in the syntax

I am encountering an issue while trying to incorporate a user's profile updater on my website. Whenever I attempt to access a user's profile on the site, I run into this Angular error: main.ts:6 ERROR SyntaxError: Unexpected token 'e', ...

javascripthtmlangulartypescriptprofile

Get rid of the background shade in the area separating the menu items within a CSS menu

Is there a way to add some spacing between the menu items without affecting the background color applied to the anchor tags? I currently use a right margin of 13px for the spacing, but it also applies the background color, which is not the desired outcome ...

css

Tips for keeping a label above an input field

Is it possible to add a styled label on top of an input element? I have seen images placed inside input elements for indicating the type of input accepted. For example, in a login form, a user icon represents the username field and a key icon represents th ...

htmlcss

When using position:sticky, the overflow:auto behavior may not function as intended

My Bootstrap table has the class "table-responsive," which automatically sets overflow-x to auto when the table is too wide for the screen. In addition, I've applied the class "sticky-top" to the th elements in order to make them sticky within the ta ...

htmlcssbootstrap-4

A useful Javascript function to wrap a string in <mark> tags within an HTML document

I have a paragraph that I can edit. I need to highlight certain words in this paragraph based on the JSON response I get from another page. Here's an example of the response: HTML: <p id="area" contenteditable> </p> <button class="bt ...

javascriptjqueryhtmljson

Tips for successfully sending a nested function to an HTML button and dropdown menu

I'm working on two main functions - getChart() and fetchData(). The goal is to retrieve chart data and x/y axes information from a database. Within the getChart function, I'd like to incorporate a dropdown menu for displaying different types of c ...

javascripthtmljquerycsschart.js

Items in a pair of distinct columns

I want to enhance a picture by adding three paragraphs on the left-hand side. Below is my HTML code: <md-toolbar layout-align="center center"> <h3>Traffic Light Component</h3> </md-toolbar> <md-grid-list md-cols ...

htmlcssangularjs

Angular dynamically changes the placeholder text in an input based on a selection made in a mat select dropdown

Trying to change the placeholder text in a mat-input based on selection in mat-select, but struggling to bind it to the selected option. <mat-form-field appearance="outline" class="search-field" style="width:40vw"> ...

htmlangular

Stop the form from refreshing upon submission using an Ajax call in AngularJS

Currently, I am in the process of developing a search form that requires two inputs: Job title and Location. These keywords are used to gather data from various websites. However, upon submitting the form, the page refreshes itself. To prevent this, I have ...

javascriptjqueryhtmlajax

Issue: The function _lib_getAllUsers__WEBPACK_IMPORTED_MODULE_2___default(...) is not recognized as a valid function

I'm currently following the YouTube series on Next.js by Dave Gray. My goal is to import a function from the file "lib/getAllUsers" https://i.sstatic.net/1SQMg.png However, I'm encountering the following error: Unhandled Runtime Error Error: ...

javascripthtmlreactjswebnext.js

Looking for a way to limit the number of characters allowed per line in a textarea using jQuery

I have the following HTML textarea: <textarea name="splitRepComments" cols="20" rows="3" ></textarea> I have implemented a maxlength restriction using jQuery with the following function: var max = 100; $('#splitRepComments').bind(" ...

javascriptjqueryhtmlcsstextarea

Leveraging an HTML form for searching and fetching data from MySQL Workbench using PHP

I'm currently working on fetching data from my database by utilizing an HTML form and establishing a PHP connection to my SQL workbench. The data retrieval is successful, as it appears at the top of my webpage. However, I am facing issues with executi ...

phphtmlmysql

Stepper wizard experiences a variation in CSS styling when minified

Two plunkers showcasing material design wizard selectors are causing different behavior upon stepper clicks. One uses a minified version of CSS while the other is expanded. The issue arises with the transition effects in the .step-wizard .progressbar class ...

javascriptjqueryhtmlcss

Saving changes made in HTML is not supported when a checkbox is selected and the page is navigated in a React application using Bootstrap

In my array, there are multiple "question" elements with a similar structure like this: <><div className="row"><div className="col-12 col-md-9 col-lg-10 col-xl-10 col-xxl-10"><span>Question 1</span></div ...

javascripthtmlreactjsreact-hooksbootstrap-5

Placing an Image in Next.js

I've been trying to position my image all the way to the right of the page using CSS properties like position: absolute and right: 0. I've also attempted setting the parent element's position to relative and the image's position to abso ...

cssreactjsnext.js

"Enhance the visual appeal of your Vue.js application by incorporating a stylish background image

Currently, I am utilizing Vue.js in a component where I need to set a background-image and wrap all content within it. My progress so far is outlined below: <script> export default { name: "AppHero", data(){ return{ image: { bac ...

javascripthtmlcssvue.js

Trigger file upload window to open upon clicking a div using jQuery

I utilize (CSS 2.1 and jQuery) to customize file inputs. Everything is working well up until now. Check out this example: File Input Demo If you are using Firefox, everything is functioning properly. However, with Chrome, there seems to be an issue se ...

javascriptjquerycssfile-upload

Harvesting the local image file

Currently, I have implemented a form that allows users to upload images and crop them. The process flow has been established as follows: 1. User uploads the image 2. Server processes the image and sends it back to the browser 3. User crops the image a ...

phpjavascripthtml

Align two spans vertically in a div using Bootstrap

Struggling to create a left-hand side navigation card with Bootstrap and Bootstrap icons. The goal is to have the page name on the left and an icon on the right, but vertical alignment is posing a challenge. Take a look at the code snippet below: <b-li ...

htmlcsstwitter-bootstrapbootstrap-4

Is there a way to reverse the hover effect on div elements?

Let's start by examining the code I've written: HTML: <div class="button_container"> <div class="inner_button"> <a href="#" class="button_text">Button</a> </div> <div class="button_side"> ...

javascriptjqueryhtmlcsshover