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

Is it possible to create this design using CSS?

I attempted to break away from the conventional square layout of the internet with this design, but I am struggling to utilize Z-index to layer the backgrounds effectively. Here is the current code: <!--############################################# ...

csstwitter-bootstrapbackgroundz-index

Discover the significance of a data attribute's value for effective comparisons

I have a loop that generates random numbers and positions to create 4 answer choices for users. Now, I am trying to determine the value of the clicked button and compare it to the position of the correct answer. However, whenever I try to do this, it retu ...

javascriptjqueryhtml

Using JQuery to extract information from a JSON file

Here is the code I am working on, where I pass input username and password values. The function I have written checks if the input matches the data in a JSON file. If there is a match, an alert saying "login correct" will be displayed, otherwise it will di ...

javascriptjqueryjsongetjson

Tips for showing all percentages on a Google PieChart

I'm currently encountering two issues. How can I ensure that the entire legend is visible below the graph? Sometimes, when the legend is too large, three dots are added at the end. Another problem I am facing involves pie charts. Is there a way to d ...

javascriptphphtml

Tips on when to display the "Email Confirmation" input text box only after updating the old email

Oh no!! Yes, that's exactly what I desire! I've been facing obstacles in trying to understand how to display the "Email Confirm" input text-box ONLY when the old email has been updated. Can someone point out where I might have gone wrong? :( ...

javascriptphpjquerylaravel

Reinitialize Yii2 form with jQuery without triggering mandatory data warning

I've tried multiple ways to reset the form, but none seem to work correctly. In Yii2, I keep getting a "data required" error even after clearing a field, and one of them doesn't even clear. Here is the Yii2 action function: public function acti ...

jqueryajaxformsyii2reset

Working with jQuery, CSS, and functions to modify the current tag's class

Let's keep it brief and straightforward: Here is my HTML <div id="headerVideoControls" class="overlayElement"> <div id="videoMuteUnmute" onclick="muteUnmuteVideo('headerVideo')">mute button</div> </div> Edited ...

javascriptjqueryhtmlcssaddclass

Postponed in JQUERY | AJAX

My requirement is to retrieve data using the "SetUnit()" function, which includes asynchronous AJAX services. I attempted to use Deferred as suggested in this link, but it did not work for my needs. Code...... Function function SetUnit(query) { var ...

javascriptjqueryajaxpromisejquery-deferred

Tips for creating visually appealing text on a web browser with the help of open-source libraries

Have you ever noticed that no matter how we display text on webpages, whether it's in a <p> tag or an <h1> tag, the result is always the same? (a screenshot of a rendering done in Firefox) Do you struggle with pixelated areas on the curv ...

phpjavascripthtml

Guide on extracting the ID within a for loop and incorporating it into a Vue.js function

In order to make an API request, I need to retrieve the id. However, whenever I try to include <a v-on:click="showRecipe({{inf.Id}})">Recipe</a> in my code, the entire page crashes. Removing this line resolves the issue. How can I pass the id ...

javascripthtmlvue.jsvuejs2vue-component

Make sure to have the list available while choosing an item

I want to design a unique CSS element with the following characteristics: Include a button. When the button is clicked, a list of items (like a dropdown list) should appear. We should be able to select items by clicking on them, and the parent component s ...

cssreactjsdrop-down-menufluent-uifluentui-react

Tips for arranging divs in a row to switch to stacking when the screen size decreases

Sorry if this question seems repetitive, but as a newbie, deciphering posts from others has been overwhelming! I have two divs placed side by side within a wrapper, but I need them to stack on top of each other when viewed on a tablet or phone. Below is t ...

htmlcss

Issue Encountered While Trying to Upload File Using Ajax

I have been encountering an issue with uploading a file using Ajax. My goal is to upload a single file only. Below are the snippets of code that I have utilized. HTML & Ajax $(document).ready(function(){ $("input:submit").on('click', func ...

phpjqueryhtmlajax

Intermittent issues with requesting JSON data

My current project involves building a script that iterates through a list, retrieves product SKUs, and includes them in a JSONP request to retrieve an object. The script seems to be functioning as intended, but there are occasional failures. Here is an e ...

jqueryajaxjsonjsonp

Converting JSON information into a mailto hyperlink

Can anyone help me figure out how to encode a mailto link properly with JSON data in the query parameters, ensuring that it works even if the JSON data contains spaces? Let's consider this basic example: var data = { "Test": "Property with spaces" ...

javascripthtmljsonmailto

What is the best way to create a new variable depending on the status of a button being disabled or enabled

Imagine a scenario where a button toggles between being disabled when the condition is false (opacity: 0.3) and enabled when the condition is true (opacity: 1). Let's set aside the actual condition for now -- what if I want to determine when the butt ...

javascriptcssreactjsnext.js

Show text upon hovering using jQuery

I am currently exploring jquery and trying to implement a functionality where text is displayed upon hovering over a div element. My basic html page consists of squares, with one of them rotating when a button is clicked. I now want to show some text withi ...

javascriptjqueryhover

ways to make a list element inaccessible by using either Javascript or jQuery

When the user clicks on my eraser, I want the color to be hidden or not display its dropdown elements. I attempted this with the following code snippet. $('#chooseEraser').mousedown(function(e){ curTool = "eraser"; checkEraser ...

javascriptjquery

Problem Alert: Click Event Not Functioning on Generated Links

Take a look at these two code snippets. Despite other jQuery functions in the same JS file working fine on the UL element, nothing seems to be happening with these. Is there something obvious that I am missing? <ul id="activityPaganation" class="paga ...

javascriptjqueryhtml

How about showcasing bigger images in the main body of the page?

When it comes to using CSS sprites for images, the typical advice is to reserve it for smaller images like icons. Why should larger content images only be represented through <img> elements? Are there not benefits to utilizing spriting for all types ...

cssimagecss-sprites