What can be done to prevent divs from overlapping? They display properly on a computer browser, but not on mobile devices like phones or tablets

Recently, I took on the task of creating an eBay template for someone. With some assistance and a bit of trial and error, I managed to get it working, albeit with what I like to call "not-so-great" code. However, there is one issue that arises when viewing the template on mobile phones or tablets - specifically, three overlapping div elements.

If you take a look at this image here, you'll see exactly what I mean:

The central table in the design displays three columns that overlap, causing a visual hiccup. Any ideas on how I can rectify this?

Here is the snippet of code pertaining to that particular section:

<div style="border:2px solid white;width:700px;height:350px;overflow:scroll;overflow-y:scroll;overflow-x:hidden;background-color:#90C382;">
  <u><b><font color=#EC008B><font size=5>MEASUREMENTS IN INCHES</u></b></font color=#EC008B></font size=5>
  <br>
  <div style="margin-left:-450px;width:233px;height:350px;background-color:#90C382;"><br><br>&emsp;    
    <u><b>TOPS/DRESSES</u></b><br><br>&emsp;

MEASUREMENTS

  </div>
  <div style="margin-top:-348px; margin-left:0px;width:233px;height:350px;background-color:#90C382;"><br><br>&emsp;
  <u><b>BOTTOMS</u> </b><br><br>&emsp;

MEASUREMENTS
  
  </div>
  <div style="margin-top:-352px;margin-left:448px;width:233px;height:350px;background-color:#90C382;"><br>
    <img src="http://i1373.photobucket.com/albums/ag383/Dixie_Stockwell/Measurementstraced-01_zpsca8e6a7c.png" width="200px" height="298.5px" align="right";>  
  </div>
</div>
androidjquerycsshtml

Answer №1

Instead of relying on negative margins, you may want to consider using the "float" property. A helpful blog post explaining how floats work can be found at All About Floats. If the issue only arises on handheld devices, it might be beneficial to create separate rules for those devices. More information on this topic is available at Media Queries. Chris Coyier's blog provides excellent explanations that are easy to understand and extremely helpful. Best of luck!

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

Exploring Bootstrap: Understanding column stacking and the requirement for a new row to stack upon resizing

I am currently mastering Angular and Bootstrap for a potential job opportunity, so I have decided to create a simple demo page. However, I am facing an issue with getting a new row to stack after the last div of the previous row when resizing. Initially, m ...

htmlcssangularjstwitter-bootstrap

Align the tops of the tables

I currently have three tables in my HTML code. When all three tables are filled with data (10 rows each), they appear correctly aligned as shown in the first picture. However, if any of the tables do not have the maximum capacity of 10 rows reached, they ...

htmlcsshtml-table

Ways to eliminate extra spacing when search bar is expanded

My code is all contained within a header with the class 'example'. When the 'search' button is clicked, a div with the class 'search-bar' appears and its borders match those of the header. However, I want the search bar to ali ...

css

How can I create a loop to iterate through form/input files with varying titles?

Looping through input files with different titles Hello, I am trying to figure out how to loop through an input file with different titles. Each input file has a unique title, such as Safety Data Sheet, Certificate, etc. This is my current code: $titles ...

phphtmlformsloopsforeach

The challenge of incorporating mod_rewrite with CSS files

I am new to mod_rewrite. I have a page profiles.php?page=XXX and I tried to change its URL to something more friendly like /cars/XXX/ RewriteEngine on RewriteRule ^cars/([^/]+)/?$ profiles.php?page=$1 [L] The issue arises when including styles: <li ...

phpcssmod-rewriteradix

Is there a more efficient method for writing my jQuery code that follows a step-by-step approach?

I have developed a step-by-step setup process that guides users through various sections. Instead of using separate pages for each step (like step1.php, step2.php, etc.), I have all the code contained in one page named setup.php. This is achieved by utiliz ...

javascriptjquery

Tips for linking two project routes in NodeJS and incorporating React (I am interested in invoking React within the NodeJS project)

I'm in the process of linking two projects, one using reactJS and the other NodeJS. Currently, NodeJS is running smoothly on localhost:3000. Next, I want to call a React application which redirects to port localhost:3001. How can I seamlessly connect ...

javascripthtmlcssnode.jsreactjs

Contradictory jQuery extensions

After exploring this site as part of my web coding self-study, I decided to register so I could ask a specific question. Currently, I am in the process of developing my new website and ran into an issue on a test page (www.owenprescott.com/home.html). The ...

javascriptjqueryhovermosaic

Is there a way to ensure my function runs as soon as the page starts loading?

My goal is to have a function execute as soon as a person opens my page, without requiring any interaction. The function should trigger on page load, rather than waiting for a click event. Additionally, I want the function to repeat every 90 seconds. I&apo ...

javascripthtmlcssonloadtransition

I am currently attempting to find a color picker element within a parent class using Cypress CSS Locator. While I am able to reach the parent element, I am unsure of the correct method to target the

My user interface has a list of elements displayed in 2 columns. The first column shows the name of the item, such as Manager, Operator, and the list is expected to grow. The second column consists of a color picker element where you can choose a color. I ...

javascriptcssselenium-webdrivercypress

Ways to troubleshoot and resolve the jQuery error with the message "TypeError: 'click' called"

I am currently developing a project for managing Minecraft servers, focusing on a configuration panel. I have set up a form that users need to fill out in order to configure the settings and send the values using Ajax. However, I encountered an error: Type ...

javascriptphpjqueryajaxhtml

The HTML date input is displaying the date incorrectly, appearing one month off when set via the value attribute

i have tried this in two different browsers 1.Chromium Version 76.0.3809.87 2.Mozilla firefox 68.0.1 every time i enter a date in the input field in the format y-m-d, the month seems to be reduced by one without any explanation this is my code <i ...

htmldatefirefoxdatepickerchromium

Requirements for validating email with jQuery

Currently, I am using the jQuery.Validation plugin to handle client-side validation in my project. One key aspect of validation is checking email addresses. However, I have come to realize the importance of also validating on the server side for users who ...

jqueryemail-validationclient-side-validation

Switching the color of the nav-link in Bootstrap

Struggling to change the color of my Bootstrap's nav-link to white with no success. Here is my code snippet: <nav class="navbar navbar-light" style="background-color: #5E9DFE;"> <a class="navbar-brand" href=& ...

htmlcsscolors

Improving jQuery Selectors Optimization

Recently, I've been pondering about the impact of specifying selectors very specifically versus very loosely in jQuery on performance. For example: $('$myId .someElement') Versus $('table#myId > tbody > tr > td > div.some ...

jqueryoptimization

I'm having trouble grasping the concept of serving gzip-compressed JavaScript and CSS files

Why is it important to serve compressed JavaScript and CSS files? I understand that it reduces file size, but does the browser/webserver have to decompress them to read them? It's been mentioned that the webserver handles the compression. Does this me ...

javascripthtmlcssapachenginx

Navigating a collection in jQuery backwards: Tips for going through in descending order

My variable holds a list of items obtained using the function GetListItems(). First, I create an enumerator for the list using var listItemEnumerator = listItems.getEnumerator(); Then, I iterate through the list from top to bottom using a while loop. ...

jquery

Is it possible for a draggable position:absolute div to shrink once it reaches the edge of a position:relative div

I am facing an issue with draggable divs that have position:absolute set inside a position:relative parent div. The problem occurs when I drag the divs to the edge of the parent container, causing them to shrink in size. I need the draggable divs to mainta ...

javascripthtmlcsscss-positionabsolute

Providing parameters to a function. What could be the issue?

Here is a link to my code on jsFiddle I am attempting to pass an argument to a function, but it seems like the argument is not being received or executed. <a href="javascript:addRemove('7249');">Details</a> This code snippet uses J ...

javascriptjquery

The issue with the Bootstrap 5 navbar in an Angular project is that it expands properly but fails to close when

I am currently working on developing a Single Page Application using Angular 12 and Bootstrap 5. As part of this project, I have created a shared navbar component. The issue I am facing is that when the navbar transitions to the hamburger menu button for ...

htmlangulartwitter-bootstrapbootstrap-5