What could be causing this div to shift positions when the browser window is resized?

When resizing the browser, I'm having trouble keeping the div boxes in place. The bottom-right lower div (vd-grid-sub-box) keeps shifting away when I slightly decrease the browser size. Additionally, vd-grid-right-col overlaps with the banner if the size is reduced even further.

I've spent numerous hours trying to figure this out and I'm at a loss. As a beginner, I would appreciate a clear explanation of what needs to be done. This issue arose when I switched the website from static to fluid, requiring me to change all pixels to percentages. Could I have made a mistake in doing so?

<!doctype html>
<html>
...

The CSS section causing issues:

.vd-grid {
    width: 98.6%;
    margin:13px auto;
    }
.vd-grid-left-col {
    width: 77.6%;
    float:left;
    }
.vd-grid-right-col {
    width: 17.8%;
    float:left;
    }   
.vd-grid-main-box {
    width: 93.5%;
    height: 460px;
    background-color: #000029;
    padding: 20px 30px;
    }
.vd-grid-main-box img {
    width:100%;
    height:auto;
    position:absolute;

    }
.vd-grid-sub-box {
    width: 27.3%;
    height:146px;
    background-image:url(../img/granda_hj.jpg);
    background-size:cover;
    background-position:top center;
    background-color:#000029;
    float:left;
    padding: 15px 25px;
    margin:0 0 15px 0;
    }
.vd-grid-xtra-box {
    width:225px;
    height:318px;
    background-image:url(../img/tst_img.jpg);
    background-size:cover;
    background-position:center center;
    background-color:#000029;
    padding: 10px 20px;
    ...

Answer №1

Your 3 <div> with the class vd-grid-sub-box all have their width specified in percentages, but their padding is fixed in pixels (set by classes vd-margin-left and vd-margin-right to 10px), creating a discrepancy in relative values within different screen sizes, causing the 3rd div to drop below the others under certain conditions.

To resolve this issue, it's recommended to adjust the margin to also be in percentages based on the size of your boxes.
Let's apply a margin to the 2nd box:

(container size - (box width * number of boxes)) / 2 (box sides)
(100% - (27.3% * 3)) / 2 = 9.05%

margin-left: 9.05%;
margin-right: 9.05%;

Upon testing, it appears that a margin adjustment is still needed on the right side of your 3rd box. This modification should be made either at the container level or through recalculating the margins accordingly.

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

Can anyone shed some light on why the CSS code is not functioning properly within my HTML file?

My CSS doesn't seem to be working in my HTML. I have linked it correctly, but it's not displaying properly - even showing empty in the CSS tab of Chrome Inspector. The links are there, so I'm not sure why it's not functioning correctly. ...

Is there a way to make Chrome ask to save a password within an HTML form?

I'm having trouble getting a basic email/password HTML form to prompt Chrome to save the password. Despite following examples, it's not working for me. Here is my code: <form name="loginForm" action=""> E-Mail:<br><input ...

Creating various iterations of a single CSS animation

Attempting to animate multiple instances of a cross mark animation can be tricky. The animation works well with one instance, but struggles when trying to create more than one. The challenge lies in controlling the size and position of each cross animation ...

Updating the source of an iframe when the linked file is modified or updated

Currently, I am in the process of developing a page named live_link_frame.php. This page includes loading an iframe through a URL retrieved from a local file called live_link.txt: <?php $filePath = 'live_link.txt'; $handle = @fopen($filePath, ...

Storing information in the DOM: Choosing between Element value and data attribute

When it comes to storing values in a DOM element, we have options like using the data attribute. For example, $("#abc").data("item", 1) can be used to store values and then retrieve them with $("#abc").data("item"). However, I recently discovered that th ...

Display a background color behind an <img> element when the image's dimensions are smaller than the page

Currently, I am utilizing the following CSS for styling an image - check it out here img { border: 3px solid #ddd; margin-left: auto; display: block; margin-right: auto; background: red; } If you would like to view the output, click on this link - see it ...

Creating a horizontal scrolling section for mobile devices using CSS

Looking to create a horizontal scroll area specifically for mobile devices, similar to the design seen here: https://i.sstatic.net/oSNqL.png Additionally, I want to hide the scrollbar altogether. However, when attempting to implement this, there seem to ...

Modifying HTML elements with JavaScript - a practical guide

I'm trying to dynamically add the variable x to an existing HTML tag. The goal is to update the image tag <img id="Img" src="IMG/.jpg"/> by appending the variable x at the end of its id and source: <script> var images ...

Achieving Vertical Centering in Bootstrap: A Step-by-Step Guide

Creating a mobile-optimized website using bootstrap 4. Currently struggling to vertically center an element within the available space. The element consists of a title with fixed size, a message, and 2 buttons in a div. Need to ensure it is vertically cent ...

Adjusting image size according to browser dimensions

I've been struggling to resize a background image on my Square space website dynamically based on the user's browser window size. If the window width drops below a certain point, I want the image to adjust accordingly while maintaining its aspect ...

Is there a way to manage specific HTML elements in Angular?

I am working on displaying a list of enable/disable buttons for different users. The goal is to show the appropriate button for each user based on their status - enabling if disabled and disabling if enabled. To achieve this, I have utilized the flags "use ...

Adaptable placement of background across screen widths

I am facing an issue with three buttons that have the same height and width, text, and background icons on the right. On small screens or when there is only a single word in the button, I want to move the icons to the bottom center of the button. Is there ...

When using jQuery, the onChange() function can be used to switch focus

Make sure to check out this fiddle first: http://jsfiddle.net/7Prys/ I am looking for a way to automatically focus on the next input field when a user enters a value in the previous field. This should happen until the fourth input field. Is there a simple ...

Navigation menu with submenus containing buttons

I attempted to incorporate a dropdown into my existing navigation bar, but unfortunately, the dropdown content disappeared after adding the necessary code. I am now at a loss on how to troubleshoot this issue and make the dropdown function properly. Despit ...

I'm having trouble obtaining accurate results for $....<...$ within the <li> tags using MathJax

I have gained extensive experience working with LaTeX formatting, but not every document follows the standard practice of having a space before and after the symbols < and >. When I attempt to use MathJax to display these documents, they fail to rend ...

Enhance your website design with a custom content scroller using Bootstrap and

Having trouble getting this plugin to work with bootstrap on my website. Does anyone have a solution for this issue? Alternatively, does anyone know of another approach I could take? UPDATE: I managed to fix the problem myself. Add the following code ...

Retrieve the URL from an iframe using Python and Selenium

On my website's main page, there is an iframe containing the text Code: LWBAD that I need to retrieve. For a clearer visual, refer to the image below: https://i.sstatic.net/DJgbd.png Below is the source code of my main HTML page which includes the ...

Security Error when using the JavaScript map function in FireFox

My current dilemma involves using a JavaScript code to extract the above-the-fold CSS from my websites. Surprisingly, it functions flawlessly on Google Chrome. However, when I attempt to execute it on Firefox, an infamous 'SecurityError' occurs: ...

Implement Infinite Scrolling Pagination in WordPress

I'm completely new to Wordpress and currently utilizing the FoundationPress theme. My goal is to include a button that users can click on to load more posts. Essentially, I want users to see four blog posts initially and then be able to load the next ...

AngularJS selectChosen does not have built-in support for translation

<select chosen options="myOptions" ng-model="StatCode" data-placeholder="{{'PleaseSelect' | translate}}" ng-options="item[0] as item[1] + ' / ' + item[0] for item in myOptions" required>< ...