Two adjacent div tags spanning the full width of the page, with differing widths (40% and 60%) that resize to 100% width and stack on top of each

Question

Two adjacent div tags spanning the full width of the page, with differing widths (40% and 60%) that resize to 100% width and stack on top of each

I've been experimenting with a layout challenge and running into some obstacles.

Two div tags are at the heart of the issue. Div A features an image with a default size of 768 x 400, while Div B displays an image at 1152 x 400. These images are meant to fill 40% and 60% of the screen width, respectively.

My goal is to have these divs span the entire width of the screen and scale proportionally, maintaining their 40%-60% width ratio until the screen size drops below 720px. At that point, the divs should stack vertically, with the image in Div B appearing shorter than that in Div A due to aspect ratio considerations.

I've included an illustration to clarify my objective.

Any help or guidance on this matter would be greatly appreciated!

Thank you,

html css center

Answer 1

Answer №1

To achieve the desired layout, it is important to consider the breakpoint for stacking images when designing for mobile devices. This typically occurs at 767px, which is a common starting point for mobile CSS.

Here is an example using HTML and CSS:

<div class="first">
    <img src="image1.png">
</div>
<div class="second">
    <img src="image2.png">
</div>

In the CSS:

.first, .second { float: left; }
.first img, .second img { width: 100%; }
.first { width: 40%; }
.second { width: 60%; }

@media screen and (max-width: 767px) {
    .first, .second { width: 100%; }
}

It's worth noting that if the images have different ratios, adjusting their placement to be side by side while maintaining their natural proportions may be challenging.

Answer 2

To achieve the desired layout, it is important to consider the breakpoint for stacking images when designing for mobile devices. This typically occurs at 767px, which is a common starting point for mobile CSS.

Here is an example using HTML and CSS:

<div class="first">
    <img src="image1.png">
</div>
<div class="second">
    <img src="image2.png">
</div>

In the CSS:

.first, .second { float: left; }
.first img, .second img { width: 100%; }
.first { width: 40%; }
.second { width: 60%; }

@media screen and (max-width: 767px) {
    .first, .second { width: 100%; }
}

It's worth noting that if the images have different ratios, adjusting their placement to be side by side while maintaining their natural proportions may be challenging.

Answer 3

Answer №2

Try utilizing bootstrap to accomplish this task. Check out the code snippet below for guidance:

.c {
  background-color: green;
  height: 100px;
}

.d {
  background-color: yellow;
  height: 100px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="c col-xs-12 col-sm-5"></div>
<div class="d col-xs-12 col-sm-7"></div>

Answer 4

Try utilizing bootstrap to accomplish this task. Check out the code snippet below for guidance:

.c {
  background-color: green;
  height: 100px;
}

.d {
  background-color: yellow;
  height: 100px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="c col-xs-12 col-sm-5"></div>
<div class="d col-xs-12 col-sm-7"></div>

Two adjacent div tags spanning the full width of the page, with differing widths (40% and 60%) that resize to 100% width and stack on top of each

Answer №1

Answer №2

Similar questions

An issue in D3.js where the chart bars are not properly synced with the x-axis labels

Adjusting the image width to a set height requirement

Is it possible for me to reply to packets that are transmitted to a website?

How to override the styling of a parent element in CSS

Implementing a click event on an image in an Angular 4 application

Does .NET MVC provide the necessary separation of HTML/CSS/JS for my project?

Dominating React Components with Unique CSS Styles

Working with the visibility of a button using JavaScript

Struggling to position Bootstrap navbar links completely to the right side

Ensuring DIV Fills without Compromising Aspect Ratio

Using Ajax to make a request on the same page but specifically within a column

Safari re-downloads background image when revisiting with jQuery CSS

What can I do to ensure my text appears closer to the top of the page?

Updating the innerHTML of a button with a specific id using Javascript is not possible due to it being "null."

Is receiving an error message about a "stray start tag footer" in your HTML validator?

When attempting to update a database, the Jquery ajax response is not being reflected

Laravel's blade allows you to easily convert an HTML element to an array using the same name

Optimizing Bootstrap for Tablet Browsing in Internet Explorer

Troubleshooting: Issues with Jquery's replaceWith function

What is the best method for obtaining table structure using Bootstrap dropdowns?