Adjust the size of CSS boxes based on the window dimensions

Question

Adjust the size of CSS boxes based on the window dimensions

I am facing an issue with two divs placed side by side.

They appear fine when the page is viewed in full-screen mode.

However, upon resizing the window, the right div overlaps the left one and causes a messy layout.

.

-I want to prevent these boxes from stacking on top of each other when the window size changes.

I attempted to use max-width; and min-width; properties but was unsuccessful in fixing the problem.

.

-I also tried adjusting the font sizes to be smaller or larger based on the window size using values like font-size: 70%;, but it did not work as intended.

CSS:

.leftbox {
    top: 15%;
    position: absolute;
    color: white;
    padding: 10px;
    font-size: 2em;
    max-width: 700px;
    overflow: hidden;
    background: rgba(121, 183, 0, 0.9);
    box-shadow: 0 4px 10px 4px rgba(43, 141, 6, 0.85);
}

#rightbox {
    top: 15%;
    right: 5%;
    position: absolute;
    background: rgba(121, 183, 0, 0.9);
    padding: 40px;
    max-width: 500px;
    border-radius: 4px;
    box-shadow: 0 4px 10px 4px rgba(43, 141, 6, 0.85);
    font-size: 2em;
    color: white;
}

HTML

<div class="leftbox">
    [Lorem Ipsum text for leftbox goes here]
</div>

<div id="rightbox">
    [Lorem Ipsum text for rightbox goes here]
</div>

JSFiddle: https://jsfiddle.net/p6mttf9q/

html css

Answer 1

Answer №1

I am a fan of @JiFus method, however there is an additional solution available to you. You can implement Media Queries and adjust

position: absolute;

to be

position: relative;

for smaller screens or devices.

For instance, you could utilize the following code:

@media screen and (max-width: 800px) {
.leftbox { position: relative !important; }
#rightbox { position: relative !important; }
}

Feel free to check out the jsfiddle link for more details: https://jsfiddle.net/p6mttf9q/4/

Answer 2

I am a fan of @JiFus method, however there is an additional solution available to you. You can implement Media Queries and adjust

position: absolute;

to be

position: relative;

for smaller screens or devices.

For instance, you could utilize the following code:

@media screen and (max-width: 800px) {
.leftbox { position: relative !important; }
#rightbox { position: relative !important; }
}

Feel free to check out the jsfiddle link for more details: https://jsfiddle.net/p6mttf9q/4/

Answer 3

Answer №2

Take a look at this JSFiddle link

This technique showcases the optimal way to use absolute elements effectively. The key code snippet responsible for this is:

.leftbox {
  max-width: calc(50% - 28px);
}

as well as

#rightbox {
  max-width: calc(45% - 88px);
}

In essence, I am calculating the maximum width for both divs to prevent any overlap. The calculation is based on ensuring that both containers occupy approximately 50% of the space available:

For the left box: 50% - padding (10px on each side) - box shadow (4px on each side).

For the right box: 50% - margin-right (5%) - padding (40px on each side) - box shadow (4px on each side)

Answer 4

Take a look at this JSFiddle link

This technique showcases the optimal way to use absolute elements effectively. The key code snippet responsible for this is:

.leftbox {
  max-width: calc(50% - 28px);
}

as well as

#rightbox {
  max-width: calc(45% - 88px);
}

In essence, I am calculating the maximum width for both divs to prevent any overlap. The calculation is based on ensuring that both containers occupy approximately 50% of the space available:

For the left box: 50% - padding (10px on each side) - box shadow (4px on each side).

For the right box: 50% - margin-right (5%) - padding (40px on each side) - box shadow (4px on each side)

Adjust the size of CSS boxes based on the window dimensions

Answer №1

Answer №2

Similar questions

Adjust the style of an element when hovering over a different element

Mobile Website Blog Page With Dual Sidebars Issue

If an AngularJS Form Item is hidden with jQuery's hide() method, will it still be validated?

Fixing the CSS 404 error caused by using variables in Flask routes: A step-by-step guide

Adaptable Text Title

What’s the best method for enclosing a table and text within a div?

Displaying an HTML file in a Node and Express application using JavaScript File handling

Selecting the initial item of every nested tag repeatedly for a total of n times

Converting JSON data into a JavaScript array and retrieving the array through an AJAX request from PHP

Tips for combining two htmlelements together

The displayed database results will appear in the opposite order of what was originally assigned for both inline and block elements

Enhance your product listings in Opencart 2.0 by adding supplementary images alongside the main product image

ng-model to interact with dynamically loaded elements

Issue with IE11: Flexbox with absolute positioning not sizing correctly, fills entire width instead of individual content

A fading transparency box on the border

Tips for aligning ticks to the left on a d3 bar chart

Using Ajax to update a webpage by invoking a PDO function within a PHP class

Open the link and input the text into the text box?

Encountering a problem when transitioning Bootstrap 3 code to version 5

How can I add content using HTML or JavaScript?