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

"Introduce a time delay for the hover effect on the navigation dropdown

I've been struggling to find a way to add a delay to this hover effect. If you visit , you'll see a menu at the top that displays panels when hovered over. The CSS code to make them appear is: #navigation li:hover > .panel { display: blo ...

jquerycss

Transform SVG with a Click

Can someone assist me with rotating the pink area on click and moving it to a new angle from its current position? I am looking for a way to save the current position of the pink area and then, when clicked, move it smoothly to a new position. Your help ...

javascripthtmlsvgcss-transitionscss-transforms

Firefox triggers drag events while passing over a div scrollbar

I am looking to create a file drag and drop feature using a styled div: When dragging files over the div, I want the border color to change When dragging files out of the div, I want the border color to revert back to the original In Firefox 35 (Ubuntu) ...

javascriptjqueryhtmlfirefox

How to change the image source using jQuery when hovering over a div and set its class to active?

I am working with a div structure that looks like this: <div class="row margin-bottom-20"> <div class="col-md-3 service-box-v1" id="div1"> <div><a href="#"><img src="path" id="img1" /></a></div> ...

javascriptjqueryhtmlcss

What is the process for incorporating dynamic templates in AngularJS?

I have created 3 unique templates (DetailView, CardView, Column) for displaying content on a single page. Users can easily switch between these views. My goal is to display only one view at a time on the page. When the user switches views, I want to remov ...

c#htmlcssangularjs

Tips for creating horizontal scrolling in the div element

I'm working with a div element that looks like this: <div id="tl" style="float:right;width: 400px; height:100px; background-color:Green; overflow-x: scroll;overflow-y: hidden;"> <div id='demo' style="float:left;height ...

jqueryhtmlcss

"click on the delete button and then hit the addButton

I have created a website where users can save and delete work hours. I am facing an issue where I can save the hours at the beginning, but once I delete them, I cannot save anything anymore. Additionally, when I reload the page, the deleted data reappears. ...

javascripthtmlcss

Anticipating the arrival of the requested data while utilizing Ajax sending

Greetings, I'm currently utilizing JavaScript to send a request and receive a response from the server. xxmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); myotherMethod(); I am looking for a way to ensure that the next set of instructions ar ...

javascriptjqueryhtmlajax

Showing Predefined Date on an HTML Form in an iOS Application

Is there a method to dynamically show the current date within the button that triggers the date picker in an HTML form on an iOS device? This is what currently appears: This is what I want it to automatically display: Below is the code I have implemente ...

javascripthtmliosformsdate

Crafting a captivating stacked image using just two segments

Recently, I designed my own personal website. To make it visually appealing, I decided to use a background picture as the header and placed my portrait as the avatar. My inspiration for the design was drawn from the sleek interface of Linkedin profiles. Ho ...

htmlcss

Tips for creating a fixed element with ScrollTrigger and GSAP

How can I prevent the right div from jumping on top of the left div when using a scroll trigger to make the left div's position fixed? gsap.registerPlugin(ScrollTrigger); const tlfour = gsap.timeline({ scrollTrigger: { trigger: ".ma ...

javascripthtmlcssgsapscrolltrigger

Why is my CSS and Bootstrap full-page image not displaying properly?

I've been struggling to get a full-page image to display on my website and resize responsively across different screens. I've searched through w3schools and Stack Overflow for solutions, but no matter what I try, it just doesn't seem to work ...

htmlcssreactjsimage

What is the best way to navigate through images only when hovering?

I have a website that showcases a collection of images in a creative mosaic layout. Upon page load, I assign an array of image links to each image div using data attributes. This means that every image in the mosaic has an associated array of image links. ...

javascriptjqueryhtmlimageimage-gallery

Creating a stylish Go URL bar using HTML and CSS

Looking for some guidance in JavaScript as I am new to it. I want to create a go bar similar to the ones found at the top of browsers using HTML and JS. When the button is clicked, it should navigate to the URL entered in the box. Here's an example of ...

javascripthtml

Looking for a way to keep the mobile ad unit fixed at the bottom of the screen

I am currently working on incorporating a 320x50 mobile ad into the mobile version of my website. The goal is to have the ad fill the entire width of a mobile device. However, the issue I'm facing is that the ad appears small and does not stretch acro ...

cssmobile

Ways to adjust text color after clicking on an element

Just a heads up, I didn't write all of the web-page code so I'm not exactly sure what pdiv is. But I want to see if I can fix this small issue [making text color change when clicked on to show which section you're reading]. This particular ...

javascriptjqueryhtmlcss

Enhance the dimensions of images on Tumblr

Is there a way to customize the width of a photo in HTML? I am having trouble changing the size of a photo set on Tumblr to be larger. I have tried researching it, but I don't understand where to place maxwidth:600px or if this is even the correct app ...

htmlimagephototumblrcss

What is the process for clicking on the second link within a table when the values are constantly changing in Selenium RC Server?

How can I click on the second link labeled XYZ STORES? How do I print the text "Store XYZ address"? How can I click on the second link ABC STORES? How do I print the text "Store ABC address"? The links, addresses, and store names are all changing dynam ...

htmleclipseseleniumselenium-rc

Cursor or caret bleeding through overlay on Internet Explorer

Currently, I am working on a pre-existing website called www.shopthethirdfloor.com. When using Internet Explorer, if you navigate to the products menu, select the search box, and then scroll down so that the search field goes underneath the menu overlay ...

htmlcssinternet-explorer

Is there a Container with a Heading in Material UI?

Does anyone know how to create a container with a top title like the one shown in this screenshot: I've attempted using Box or Paper components, but I can't seem to find the option for a top title. Any suggestions? Thanks in advance for any ass ...

htmlreactjsmaterial-uifieldset